不显示背景图像

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

我将尝试实现这一目标：

创建与背景图像
一个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似乎工作，但我不能在我的本地主机上成功地重现它。

来源

2014-11-23 Hohohobo

在本地主机上，你如何打开文件？ 'file：//'协议？它可能是浏览器安全性阻止访问该图像。 – 2014-11-23 21:03:20

我正在使用[Cactus for Mac]（http://cactusformac.com/）。 – Hohohobo 2014-11-23 21:18:19

您需要为包含背景图片的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'); 
}

来源

2014-11-23 21:48:00

对不起，我忘了提及我实际上已经这样做了，但它仍然无法正常工作。此外，为了保持响应能力，我需要为每个视口中断设置不同的宽度/高度规则？ – Hohohobo 2014-11-23 21:56:00

我觉得它有什么做的#b1.img选择。当我认为它应该是#b1 img时，我没有在整个页面上重复出现背景图片，我能够重现悬停时看不到它的问题。然后，我将height: 480px; width: 359px;添加到#b1标记并且它可以工作。这种改变是否能解决你的问题？

如果不行，请尝试使用这种方法，而不是改变不透明度：https://stackoverflow.com/a/18813323/4285369

来源

2014-11-23 22:02:36 brencodes

不显示背景图像

回答

相关问题