不显示背景图像
问题描述：
我正在为朋友建立一个投资组合网站。其中一项功能包括悬停时的图像更改。不显示背景图像
我将尝试实现这一目标：
- 创建与背景图像
- 一个div在它的顶部分层其他图像。
#b1 {
\t position:relative;
\t 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似乎工作，但我不能在我的本地主机上成功地重现它。
答
您需要为包含背景图片的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');
}
+0
对不起，我忘了提及我实际上已经这样做了，但它仍然无法正常工作。此外，为了保持响应能力，我需要为每个视口中断设置不同的宽度/高度规则？ – Hohohobo 2014-11-23 21:56:00
答
我觉得它有什么做的#b1.img选择。当我认为它应该是#b1 img时，我没有在整个页面上重复出现背景图片，我能够重现悬停时看不到它的问题。然后，我将height: 480px; width: 359px;添加到#b1标记并且它可以工作。这种改变是否能解决你的问题？
如果不行，请尝试使用这种方法，而不是改变不透明度：https://stackoverflow.com/a/18813323/4285369
在本地主机上，你如何打开文件？ 'file：//'协议？它可能是浏览器安全性阻止访问该图像。 – 2014-11-23 21:03:20
我正在使用[Cactus for Mac]（http://cactusformac.com/）。 – Hohohobo 2014-11-23 21:18:19