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图片显示

运行此示例：

＆＃13;

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

＆＃13;

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

＆＃13;

如何调整图像大小并保留在悬停时更改图像

1 个答案: