javascript - 交叉悬停效果 - 第二个背景没有响应

Question

我正在使用两个背景的交叉淡入淡出，第二个背景没有响应。

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;
} 

Answer 1

让图像在 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;
}