在CSS背景顏色上使用背景圖像

enter image description here 我在PSD中設計了一個網頁，我正在轉換它。在我的主要內容中，我有一個堅實的背景色，但是我在發現在背景色上的單獨圖層上有發光效果。在CSS背景顏色上使用背景圖像

我有一個包含所有代碼的容器，我有一個標題，主要和頁腳。在主體中，我添加了純色背景色，並添加了從PSD切片的發光背景圖像。但是，純色背景顏色似乎並未顯示，只是顯示發光效果。下圖顯示的圖像看起來應該是什麼樣子，什麼樣：

enter image description here

CSS：

Html { 
background: white; 
} 

#container { 
width: 955px; 
height: 900px; 
margin: 0px auto 0px auto; 
} 

#main{ 
background: url(../images/slogan.png) top left no-repeat; 
background-color: #282d37; 
height: 900px; 
width: 955px; 
}

來源

2012-11-09 user1278496

您可以使用多背景：

#main { 
    width: 900px; 
    height: 955px; 
    background: url(../images/slogan.png) no-repeat, #282d37; 
}

爲了解釋：使用background CSS選項，首先添加圖像，比背景顏色。

LIVE DEMO

來源

2012-11-09 10:26:01

它不適用於IE7，但適用於其他瀏覽器。 –

嘗試更換

background: url(../images/slogan.png) top left no-repeat; 
background-color: #282d37;

隨着

background: #282d37 url(../images/slogan.png) no-repeat top left;

來源

2012-11-09 09:39:55 George

已經嘗試過了，它沒有工作:(。感謝您的幫助壽＃ – user1278496

@ user1278496我唯一的其他建議，將是設置'＃container'的'背景color'而不是'＃main' – George

試過了，那也不管用 - 這麼奇怪 – user1278496

做到這一點與你設置的背景顏色的包裝紙包裹#main元素的一種方式，然後設置不透明度（如果需要）匹配它

#mainwrapper{ 
    background-color: red; 
    height:100px; 
    width:100px; 
} 

#main{ 
    background: url(http://www.w3schools.com/css/klematis.jpg) repeat; 
    opacity: 0.6; 
    filter:alpha(opacity=60); 
    height:100px; 
    width:100px; 
} 

<div id="mainwrapper"> 
    <div id="main"> 
    </div> 
</div>

來源

2012-11-09 09:42:21

Didnt工作，但是謝謝 – user1278496

問題你的風格是壓倒對方。您需要首先輸入background-color，然後使用background-image而不是background。在他們自己的屬性中聲明所有值，以便background屬性不會覆蓋background-color之一。

#main{ 
    background-color: #282d37; 
    background-image: url(../images/slogan.png); 
    background-position: left top; 
    background-repeat: no-repeat; 
    height: 900px; 
    width: 955px; 
}

來源

2012-11-09 10:20:41

謝謝。沒有正確顯示，我按照你的說法做了，我去掉了背景圖片，看看背景顏色是否仍然存在，我已經defo設置了我的slogan.png我毫克透明 – user1278496

http://jsfiddle.net/BzHTe/ - 這是一個精確的代碼工作的小提琴。顯然這是一個不同的形象，因爲我沒有你的。你確定PNG是透明的嗎？你可以在這裏添加圖片嗎？ –

這正是我想要的朋友！請檢查我已上傳的圖片。在Photoshop中，即時修剪，保存網頁並將其保存爲具有「透明度」的24位PNG。並在保存爲網絡之前刪除了psd中的所有其他圖層 – user1278496

在CSS背景顏色上使用背景圖像

回答

相關問題