交叉盤旋效果 - 第二個背景沒有反應

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