我正在使用具有2个背景的交叉淡入淡出,第二个背景没有响应。
HTML:
<div class="bord2 crossfd2">
<img src="original image">
</img>
</div>
CSS:
.bord2 {
padding: 0;
margin: 0;
-webkit-box-sizing: border-box;
}
.crossfd2 {
background: url("transition-image");
display: inline-block;
font:size: 0;
**** the extra code goes here ****
}
.crossfd2 img{
-webkit-transition: opacity 1s ease-in-out;
-moz-transition: opacity 1s ease-in-out;
-o-transition: opacity 1s ease-in-out;
transition: opacity 1s ease-in-out;
}
.crossfd2 img:hover {
opacity: 0;
}
谢谢!
亚当
要解决此问题,请添加以下CSS:
对于背景图片:
.class_with_img {
background-image:url('img_name.png');
background-repeat:no-repeat;
background-size:contain;
background-position:center;
}
答案 0 :(得分:0)
使图像在CSS中响应
img {
height: auto;
max-width: 100%;
}
对于背景图片:
.class_with_img {
background-image:url('img_name.png');
background-repeat:no-repeat;
background-size:contain;
background-position:center;
}