Question

您正在尝试做的是使用背景颜色，并且在悬停时它将转换为图像。我找到了很好的例子，但其他方面是一个链接。 http://jsfiddle.net/davidThomas/PbvFr/1/所以我需要bg black and on：hover图像会随着时间的推移出现。我试图这样做但不幸的是过渡并不顺利。谢谢你的时间!!!!!!!!

.imageWrap {
    background-color: #333;
    border: 1px solid #000;
    height: 300px;
    moz-transition: all 1s linear;
    ms-transition: all 1s linear;
    o-transition: all 1s linear;
    transition: all 1s linear;
    webkit-transition: all 1s linear;
    width: 300px;
}

.imageWrap .img {
    moz-transition: all 1s linear;
    ms-transition: all 1s linear;
    opacity: 1;
    o-transition: all 1s linear;
    transition: all 1s linear;
    webkit-transition: all 1s linear;
}

.imageWrap:hover {
    background-image: url(5.jpg);
    moz-transition: all 1s linear;
    ms-transition: all 1s linear;
    o-transition: all 1s linear;
    transition: all 1s linear;
    webkit-transition: all 1s linear;
}

.img:hover, .imageWrap:hover .img {
    moz-transition: all 1s linear;
    ms-transition: all 1s linear;
    opacity: 0;
    o-transition: all 1s linear;
    transition: all 1s linear;
    webkit-transition: all 1s linear;
}

Answer 1

在这里：FIDDLE

<强> CSS

.imgWrap {
    display: inline-block;
    position:relative;
    border: 1px solid #000;
    background-color: #000;
    -moz-transition: all 1s linear;
    -ms-transition: all 1s linear;
    -o-transition: all 1s linear;
    -webkit-transition: all 1s linear;
    transition: all 1s linear;
    height: 500px;
    width:364px;
}

.imgWrap img {
   position: absolute;
   top: 0;
   left: 0;
   right: 0;
   bottom: 0;
   margin: 0;
   background: #fff;
   color: #fff;
   opacity:0;
   transition:1s;
}

.imgWrap:hover img {
    opacity: 1;
    -moz-transition: all 1s linear;
    -ms-transition: all 1s linear;
    -o-transition: all 1s linear;
    -webkit-transition: all 1s linear;
    transition: all 1s linear;
 }

Answer 2

只需改回他的所作所为：http://jsfiddle.net/PbvFr/102/

将不透明度从0更改为1而不是1到0.

Look the CSS

背景色的div转折到背景图象

2 个答案: