Question

我正在为朋友建立投资组合网站。其中一项功能包括悬停时的图像更改。

我试图通过以下方式实现这一目标：

使用背景图片创建div
在其顶部放置另一张图片。

#b1 {
	position:relative;
	background-image: url('http://s10.postimg.org/d03f8a015/SHOT_09_060_V2.jpg');
}

#b1.img {
    opacity:1;
    position:absolute;
    left:0;
}

#b1 img:hover {
    opacity:0;
}

<div id="b1">
    <img src="http://s29.postimg.org/v7eh0qmxz/SHOT_04_024_V7.jpg">    
</div>

但是，我无法显示背景图像，并尝试了许多步骤来解决我出错的地方。

我的代码JSFiddle似乎正在运行，但我无法在本地主机上成功复制它。

Answer 1

您需要为包含背景图像的div的宽度和高度设置CSS规则。

示例：

#b1 {
    width:500px; //set your own value
    height:500px; //set your own value
    position:relative;
    background-image: url('http://s10.postimg.org/d03f8a015/SHOT_09_060_V2.jpg');
}

Answer 2

我认为它与#b1.img选择器有关。当我将其更改为#b1 img时，我认为它应该是，我不会在页面上重复显示背景图像，并且我能够重现在悬停时看不到它的问题。然后，我将height: 480px; width: 359px;添加到#b1标记，然后就可以了。这个改变是否适合你？

如果没有，请尝试使用此方法，而不是更改不透明度：https://stackoverflow.com/a/18813323/4285369

背景图像不显示

2 个答案: