不顯示背景圖像

我正在爲朋友建立一個投資組合網站。其中一項功能包括懸停時的圖像更改。不顯示背景圖像

我將嘗試實現這一目標：

創建與背景圖像
一個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

不顯示背景圖像

回答

相關問題