無法在背景顏色前帶背景圖像

我想將背景圖像設置爲背景併爲背景顏色添加背景顏色。但我無法通過背景顏色獲取背景圖像。此外，我想通過span#test背景圖像任何幫助將不勝感激。無法在背景顏色前帶背景圖像

<div id="container"> 
       <div id="Content"> 
       Hello world, this is my content, Hello world, this is my content <br /> 
       Hello world, this is my content, Hello world, this is my content <br /> 
       Hello world, this is my content, Hello world, this is my content <br /> 
       Hello world, this is my content, Hello world, this is my content <br /> 
      </div> 
      <span id="test"> 
       Test 
      </span> 
     </div 

    #container 
    {  
     position: relative; 
     margin-bottom: -20px; 
     background-image: url('https://www.google.co.uk/images/srpr/logo11w.png'); 
     background-size: contain; 
     background-repeat: no-repeat; 
     height: 50px; 
     width: 100px; 
     z-index: 10001; 
    } 
    #Content 
    { 
     background-color:#C9CACA; 

    }

這裏是

來源

2014-02-26 Chetan Gawai

我照着NJInamdar的建議，更新了我的小提琴：

#container 
     {  
      position: relative; 

      background-image: url('https://www.google.co.uk/images/srpr/logo11w.png'); 
      background-size: contain; 
      background-repeat: no-repeat; 
      z-index: 10001; 
     height:600px; 
     } 
     #Content 
     { 
      background-color:#C9CACA; 
     opacity : 0.6; 

     }

http://jsfiddle.net/chetangawai/FFS4V/6/

來源

2014-02-26 11:57:53

div#Content包含內div#container鏈路「http://jsfiddle.net/chetangawai/FFS4V/5/」，並因此將具有更高的z-index和出現上述#container和它的背景圖像。

來源

2014-02-26 07:25:51 flauntster

感謝您reply.Can爲同你請建議份額的jsfiddle。 –

您的背景中有一個元素，顏色爲#Content，此元素將保留在背景圖片下。如果要實現反轉，你可以這樣做：

#container 
{  
    position: relative; 
    background-color:#C9CACA; 
    margin-bottom: -20px; 
    height: 50px; 
    width: 100px; 
    z-index: 10001; 
} 
#Content 
{ 
    background-image: url('https://www.google.co.uk/images/srpr/logo11w.png'); 
    background-size: contain; 
    background-repeat: no-repeat; 
}

Your updated fiddle

來源

2014-02-26 07:26:52 SeinopSys

謝謝你的答覆。但我的'div＃容器'包含其他元素應該有背景圖像，而不是背景顏色。 –

更新小提琴DEMO

#container 
    {  
     position: relative; 
     margin-bottom: -20px;   
     height: 50px; 
     width: 100px; 
     z-index: 10001; 
    } 
    #Content 
    {background-image: url('https://www.google.co.uk/images/srpr/logo11w.png'); 
     background-size: contain; 
     background-repeat: no-repeat; 
     background-color:#C9CACA; 

    }

來源

2014-02-26 07:29:23 Pugazh

做這樣就會解決你的問題，我檢查你的提琴它的工作，根據您的要求改變rgba的顏色

#container 
{  
position: relative; 
margin-bottom: -20px; 
height: 50px; 
width: 200px; 
z-index: 10001; 
} 

#Content 
{ 
background-color: rgba(102,102,102,0.3); 
background: url('https://www.google.co.uk/images/srpr/logo11w.png'), rgba(102,102,102,0.5); 
background-size: contain, contain ; 
background-repeat: no-repeat; 
    }

來源

2014-02-26 08:22:53

在這裏，我們可能需要半透明背景此處顯示背景圖像以及子元素的彩色背景。

讓我們嘗試與背景不透明度定製

<!DOCTYPE HTML> 
<html lang="en"> 
<head> 
<title>sample</title> 
</head> 
<body> 
    <div> 
     <div style="background: url('http://t1.gstatic.com/images?q=tbn:ANd9GcSo4ID8F-Kj9gnVC25mtiNd4zfNqyF0g4cC-kGx2HOAstRdza5v'); background-size: cover;"> 
         <center> 
         <div style="height:200px;width:500px;background-color:rgba(255,0,0,0.5);"> 

          <h1 class="headingLabel" style="color: white;">Lorem ipsum 
           dolor</h1> 
          <p style="font-size: 14px;color:white">Lorem Ipsum is slechts een 
           proeftekst uit het drukkerij- en zetterijwezen. Lorem Ipsum is 
           de standaard proeftekst in deze bedrijfstak sinds de 16e eeuw, 
           toen een onbekende drukker een zethaak met letters nam en ze 
           door elkaar husselde om een font-catalogus te maken. Het heeft 
           niet alleen vijf eeuwen overleefd maar is</p> 
         </div> 
               <div style="height:100px;width:500px;background-color:rgba(255,11,100,0.5);"> 
          another test content 
         </div> 
               </center> 
     </div> 
    </div> 
</body> 
</html>

來源

2014-02-26 09:15:42 Daenarys

嘗試

#container 
{  
    position: relative; 
    margin-bottom: -20px; 
    background:#C9CACA url('https://www.google.co.uk/images/srpr/logo11w.png') no-repeat; 

}

here Jsfiddle example

來源

2014-05-02 08:28:15

無法在背景顏色前帶背景圖像

回答

相關問題