如何調整圖像大小並保留在懸停時更改圖像的能力

Question

我有這個問題..我希望能夠使用

.custom-forums {
    height: auto;
    width: 100%;
    border-image-source:transparent url("../images/forums.png") center top no-
    repeat;
}

和

.custom-forums:hover {
   background-image: url('../images/forums-hover.png');
}

問題是：當width設置為100%它根本不顯示圖像。 但是當width和height設置為170px它確實有效。 我希望根據屏幕分辨率調整按鈕大小並保留更改懸停圖像的能力。

非常感謝， Mas21

Answer 1

背景圖像需要在其容器中具有預定義的高度或特定高度的內容才能工作。

我有一個想法，你可以用另一種方式做到這一點：

• 使用背景圖片
• 將另一個圖像放在該 div 中，然后懸停將其設置為不透明度 0，或者您的偏好和 bg 圖像顯示

運行這個例子：

 .container { background: url('http://placehold.it/199x199') no-repeat center center; width: 200px; } img { transition: opacity ease-in-out .5s; } img:hover { opacity: .25; }

 <div class="container"> <img src="http://placehold.it/200x200"> </div>