0

我对这个图像悬停效果有一个 CSS 问题 - “小提琴”。我不能使用宽度 100%.img-overlay来让叠加层覆盖两张图片的整个区域，所以我必须使用width:138px第一张和width:300px第二张。这样做，我最终又制作了 4 个类 ( .img-overlay2 .img-overlay2.2 .img-overlay2 h4 .img-overlay2 p, .img-wrap:hover .img-overlay2) 有没有更简洁的方法来实现这一点？我可以避免一些重复吗？

CSS

.img-wrap{
overflow:hidden;
position:relative;
}
.img-overlay{
background-color:#8DBDD8;
bottom:0;
color:#222;
opacity:0;
filter: alpha(opacity = 0);
position:absolute;
width:138px;
height:100%;
z-index:1000;
}


.img-overlay h4, .img-overlay p{
padding:0 10px;

}
.img-wrap:hover .img-overlay{
opacity:0.75;
filter: alpha(opacity = 75);
transition:opacity 0.25s;
-moz-transition:opacity 0.25s;
-webkit-transition:opacity 0.25s;
}


.img-overlay2{
background-color:#8DBDD8;
bottom:0;
color:#222;
opacity:0;
filter: alpha(opacity = 0);
position:absolute;
width:300px;
height:100%;
z-index:1000;
}

.img-overlay2.2{
width:100%;
}


.img-overlay2 h4, .img-overlay2 p{
padding:0 10px;

}
.img-wrap:hover .img-overlay2{
opacity:0.75;
filter: alpha(opacity = 75);
transition:opacity 0.25s;
-moz-transition:opacity 0.25s;
-webkit-transition:opacity 0.25s;
}
4

3 回答 3

1

您可以尝试使用类似http://jsfiddle.net/EyAdp/

HTML：

<div class="a image"><div class="overlay"></div></div>
<div class="b image"><div class="overlay"></div></div>

CSS：

.a {
    width:150px;
    height:60px;
    background-image:url("http://placekitten.com/150/60");
}
.b {
    width:100px;
    height:50px;
    background-image:url("http://placekitten.com/100/50");
}
.image {
    position:relative;
}
.overlay {
    position:absolute;
    left:0;
    top:0;
    width:100%;
    height:100%;    
}
.overlay:hover {
    background-color:rgba(1,1,1,0.3);
}
于 2013-09-15T20:19:27.793 回答
1

是的...您可以轻松避免重复。请参阅以下方法：

.img-wrap{
    overflow:hidden;
    position:relative;
}
.img-overlay{
    background-color:#8DBDD8;
    bottom:0;
    color:#222;
    opacity:0;
    filter: alpha(opacity = 0);
    position:absolute;
    height:100%;
    z-index:1000;
}
.img-overlay h4, .img-overlay p{
    padding:0 10px;
}
.img-wrap:hover .img-overlay{
    opacity:0.75;
    filter: alpha(opacity = 75);
    transition:opacity 0.25s;
    -moz-transition:opacity 0.25s;
    -webkit-transition:opacity 0.25s;
}
.img-overlay138{
    width:138px;
}
.img-overlay300{
    width:300px;
}

你的html：

<div class="img-wrap">
<a href='#'><img src='http://wizzywizzyweb.gmgcdn.com/media/products/payday-2-4-pack/boxart/small-payday-2-4-pack_boxart_tall-136x159.jpg' alt="bbh"/></a><div 
class="img-overlay img-overlay138">
<p>dfdfdf</div></div>

    <div class="img-wrap">
<a href='#'><img src='http://wizzywizzyweb.gmgcdn.com/media/smallofferboxes/2013/09/13/Voucher-Low-offer-box04_.jpg' alt="ddfdf"/></a><div 
class="img-overlay img-overlay300">
<p>dfdfdf
    </div></div>
于 2013-09-15T20:20:29.763 回答
0

如果您需要保留类名 - 在不更改标记或 CSS 的情况下，您可以通过定义一次公共属性来减少重复，然后稍后在样式表中覆盖特定属性：

Demo Fiddle

.img-overlay,
.img-overlay2 {
    background-color:#8DBDD8;
    bottom:0;
    color:#222;
    opacity:0;
    filter: alpha(opacity=0);
    position:absolute;
    width:138px;
    height:100%;
    z-index:1000;
}

.img-overlay2 {
    width:300px;
}

.img-overlay h4, .img-overlay p,
.img-overlay2 h4, .img-overlay2 p {
    padding:0 10px;
}

.img-wrap:hover .img-overlay,
.img-wrap:hover .img-overlay2 {
    opacity:0.75;
    filter: alpha(opacity=75);
    transition:opacity 0.25s;
    -moz-transition:opacity 0.25s;
    -webkit-transition:opacity 0.25s;
}

通过添加两个额外的类定义并将它们添加到覆盖元素中，同时删除对 img-overlay2 的引用：

Demo Fiddle

HTML：

<div class="img-overlay small">...
<div class="img-overlay large">...

CSS：

.img-wrap {
    overflow:hidden;
    position:relative;
}

.img-overlay {
    background-color:#8DBDD8;
    bottom:0;
    color:#222;
    opacity:0;
    filter: alpha(opacity=0);
    position:absolute;
    width:138px;
    height:100%;
    z-index:1000;
}

.img-overlay.small {
    width: 138px;
    height: 159px;
}

.img-overlay.large {
    width: 300px;
    height: 120px;
}

.img-overlay h4, .img-overlay p {
    padding:0 10px;
}

.img-wrap:hover .img-overlay {
    opacity:0.75;
    filter: alpha(opacity=75);
    transition:opacity 0.25s;
    -moz-transition:opacity 0.25s;
    -webkit-transition:opacity 0.25s;
}

如果您可以在img-wrap元素上应用尺寸，则可以更改为以下内容：

Demo Fiddle

HTML：

<div class="img-wrap small">…&lt;/div>
<div class="img-wrap large">…&lt;/div>

CSS：

.img-wrap {
    overflow:hidden;
    position:relative;
}

.img-wrap.small {
    width: 138px;
    height: 159px;
}

.img-wrap.large {
    width: 300px;
    height: 120px;
}

.img-overlay {
    background-color:#8DBDD8;
    bottom:0;
    color:#222;
    opacity:0;
    filter: alpha(opacity=0);
    position:absolute;
    width:100%;
    height:100%;
    z-index:1000;
}
于 2013-09-15T20:15:31.470 回答