使用背景圖片和顏色相同的元素

我想使用背景圖像和顏色相同的元素但ID好好嘗試一下工作，甚至我在這裏使用像this question 使用背景圖片和顏色相同的元素

2012-02-24 palAlaa

你的CSS工作正常，無論是圖像和背景顏色坐在一個容器內，因爲他們是相同的顏色，你實際上看不到箭頭。

來解決它的最好方法是使用一個外部的div包裹你的頭元素，像這樣：

<div class="outer"><h1></h1></div>

然後風格與相應的CSS：

div { 
    float: right; 
    width: 198px; 
    background-image:url(http://s14.postimage.org/nitv9x7ct/top_Arrow.png);   
    background-position: 0px; 
    background-repeat: no-repeat; 
    margin-top:21px; 
} 

h1{ 
    color:white; 
    font-size: 170%; 
    font-weight: normal; 
    font-family: arial; 
    width:189px; 
    height:33px; 
    line-height: 33px; 
    background-color: #b21f23; 
    float:right; 
}

所以要澄清，外部div稍大，幷包含背景圖像對齊的左側，然後標題填充所有剩餘的空間與背景顏色。

來源

2012-02-24 10:19:07 DNJohnson

這可以工作，但從語義div沒有手段！ – palAlaa 2012-02-24 10:36:51

這是正確的，div's並不是一個特定的語義元素，它們主要是爲了在視覺上佈局頁面而存在。如果你的箭頭純粹是出於美學目的，那麼div是合適的。如果你的箭頭應該向用戶傳達實際意義（即盲人用戶應該意識到這一點），那麼更合適的解決方案是將箭頭嵌入到具有alt屬性的img元素中，並將h1浮動在它旁邊。 – DNJohnson 2012-02-24 10:51:42

試試這個

background: url(http://s14.postimage.org/nitv9x7ct/top_Arrow.png) no-repeat left center #b21f23;

這將增加背景圖像和其他一切將是你的背景顏色

來源

2012-02-24 10:11:21 clem

同樣的問題，這是它http://jsfiddle.net/xdkwB/1/ – palAlaa 2012-02-24 10:12:55

您已將背景色設置爲與圖像相同的顏色。所以它就在那裏，你只是看不到它，因爲它混合在一起。

來源

2012-02-24 10:13:23 ChrisPatrick

http://jsfiddle.net/xdkwB/12/ – ChrisPatrick 2012-02-24 10:18:22

-2

你是箭頭是te背景相同的顏色。您可以使用background-position來定位背景，並將負值留在框外：

來源

2012-02-24 10:13:45

不，一旦它在盒子外面，它將不可見。 – ChrisPatrick 2012-02-24 10:19:35

-1這將簡單地從視圖 – Curt 2012-02-24 10:21:16

我不認爲只用一個元素樣式就可以得到您想要的結果。

您可能需要在元素外部有background-image，這是不可能的。

或者你需要的background-color不填充所有元素，這也是不可能的

最好的選擇IMO，將與第一一background-image兩個元素，並background-color與文本第二

http://jsfiddle.net/xdkwB/11/

實施例：

http://jsfiddle.net/xdkwB/13/

例浮動權：

http://jsfiddle.net/xdkwB/14/

來源

2012-02-24 10:15:03 Curt

mmm隱藏'background-image'我通常爲父元素和背景圖像創建子元素的背景顏色，但這種情況不需要子元素！ – palAlaa 2012-02-24 10:19:33

使用背景圖片和顏色相同的元素

回答

相關問題