如何调整图像大小并保留在悬停时更改它们的能力答案

【问题标题】：How do I have images resize and retain the ability to have them change on hover如何调整图像大小并保留在悬停时更改它们的能力
【发布时间】：2017-04-13 16:42:22
【问题描述】：

我有这个问题..我希望能够使用

.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 时，它确实有效。我希望根据屏幕分辨率调整按钮大小并保留更改悬停图像的能力。

非常感谢，马斯21

【问题讨论】：

你有更多可以展示的代码吗？它可能不起作用的原因有很多。如果您可以创建一个重现您问题的 jsfiddle，那就更好了。
我们需要查看您的 HTML，但在第一种情况下，您的元素高度是否为 0？
元素的高度不为零。 @托克维尔
是的@JamieClark .. 在sskyblock.com查看现场直播

标签： javascript jquery html css image

【解决方案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>

【讨论】：

嗨@MasonHerbel 试试看，让我知道。