交叉盘旋效果 - 第二个背景没有反应

Question

我使用的交叉淡入淡出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; 
} 

Answer 1

对于图像响应在CSS

img { 
    height: auto; 
    max-width: 100%; 
} 

对于backgro und image：

.class_with_img { 
    background-image:url('img_name.png'); 
    background-repeat:no-repeat; 
    background-size:contain; 
    background-position:center; 
}