帶有不透明背景圖像的引導內容

我剛剛學習Bootstrap並試圖找出一種顯示帶有不透明背景圖像的內容的好方法。我目前正在使用「好」，但不必。我可以將圖像從「井」裏面取出來，並且不透明，但我無法將它「隱藏」在其他內容之後。下面是HTML的一個小樣本：帶有不透明背景圖像的引導內容

.background1{ 
 
    background-size:cover; 
 
    opacity: .25; 
 
    max-width: 1130px; 
 
}

<div class="well"> 
 
    <div class="row"> 
 
     <img class="img-rounded background1" src="/Images/housing-4-1213183.jpg" alt="housing" /> 
 
     <h2>Section Title Here</h2> 
 
     <p>This is just a place holder for text content that would be showed on top of the desired image.</p> 
 
    </div> 
 
</div>

如果有較好的一類，以用於內容請讓我知道。

來源

2016-11-08 dblwizard

你試圖讓頂部或半透明的文字下方圖片？你的問題不清楚。提醒：不透明的意思是「看不透」，半透明的手段是半透明的，透明的，顯然是完全透明的。 – mix3d

然而，由於您試圖使用css opacity來調整圖像的半透明度，因此解決方案是使用絕對定位和z-indexing，因此將其從渲染流中提取出來，從而允許您的「內容」渲染頂部（或以下，取決於z索引如何完成） – mix3d

mix3d我希望圖像「褪色」，並在背景中和文本「頂部」不褪色。這更清楚嗎？ – dblwizard

這應該爲你做。 Bootstrap沒有這個組件，所以你堅持自己製作。

.covered{ 
 
    position:relative; /* make a new "render context", so absolute positioning is relative to this parent container */ 
 

 
    padding:30px; /* only needed for this demo */ 
 
} 
 

 
.covered-img{ 
 
    background:url('http://kingofwallpapers.com/random-image/random-image-001.jpg'); 
 
    opacity: .25; 
 

 
    background-size:cover; /* cover will scale the image so that the smallest dimension = the widest dimension of the box */ 
 
    background-position:center; /* vs the top-left that is default */ 
 
    
 
    position:absolute; /* take me out of the render context! let me define my own positioning */ 
 
    top:0;bottom:0;left:0;right:0; /* this could also work with width:100%; height:100%;, but is simpler */ 
 
}

<div class="row"> 
 
    <div class="col-xs-12 covered"> 
 
    <div class="covered-img"></div> 
 
    
 
    <h3>Dat content doe</h3> 
 
    <p>So much glorious content</p> 
 
    </div> 
 
</div>

來源

2016-11-08 19:08:58 mix3d

mix3d不知道你是否收到通知，但我刪除了問題來清理這個問題。刪除您的評論後，我會刪除此評論。謝謝 – dblwizard

嘗試：

.background1 { 
background:url('/Images/housing-4-1213183.jpg'); 
background-size:cover; 
opacity: .25; 
max-width: 1130px; 
}

和

<div class="well"> 
    <div class="row">    
     <h2>Section Title Here</h2> 
     <p>This is just a place holder for text content that would be showed on top of the desired image.</p> 
    </div> 
</div>

來源

2016-11-08 18:43:38 ethercreation

ethercreation，background1在哪裏得到應用在HTML？ – dblwizard

我認爲他的意思是''div class =「row background1」>'但這不起作用，因爲不透明會導致文本也是半透明的，因爲它們是div上的孩子，標記爲不透明度降低。 – mix3d

如果只想背景圖像（而不是文字）出現半透明試試這個：

.background1 { 
background-image: linear-gradient(to bottom, rgba(255,255,255,0.3)0%,rgba(255,255,255,0.3) 100%), url("/Images/housing-4-1213183.jpg"); 
background-size:cover; 
max-width: 1130px; 
}

，並在您希望div圍繞如下內容的HTML：

<div class="well"> 
<div class="row"> 
    <div class="background1"> 
    <h2>Section Title Here</h2> 
    <p>This is just a place holder for text content that would be showed on top of the desired image.</p> 
    </div> 
</div> 
</div>

來源

2016-11-08 19:08:27 arapl3y

我認爲他混淆了不透明和半透明的術語;圖像應該是一個背景，並具有透明度，而文字是不變的。話雖如此，我喜歡分層背景的方法！但是，如果那是預期的，它不會在下面顯示任何東西。 – mix3d

是的，這讓我用錯了詞，哈。很確實，我沒有真正考慮到這一點。 – arapl3y

圖像褪色的背景和文本在其上不褪色它的上面。我相信如果這是你正在尋找的東西。

<!DOCTYPE html> 
    <html> 
     <head> 
     <style> 
       img { 
       opacity: 0.5; 
       filter: alpha(opacity=50); /* For IE8 and earlier */ 
       position: absolute; 
       left: 0px; 
       top: 0px; 
       z-index: -1; 
       } 

      .container { 
      position:relative; 
      left:100px; 
      top:100px; 
       } 

      .container h3 { 
       position:absolute; 
       top:50px; 
       left:50px; 
       } 

     </style> 
     </head> 
     <body> 

     <div class="container"> 
      <img src="https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcQBK3FmyjIENz16NWEl1iJcIWj8I5n8hs-rl5JPixzw-XppNfKx" alt="Forest" width="170" height="100"> 
      <span> 
       <h3>Hello 
      </span> 
     </div> 

    </body> 
</html>

來源

2017-01-23 06:38:14 Avan

背景圖像的CSS應該是的容器元素，而不是裏面的內容標籤...

<div class="image"> 
    Text Content <!-- Right --> 
</div> 

<div> 
    <img class="image" /> <!-- Wrong --> 
    Text Content 
</div> 

.image{ 
    background-image : url(.../); 
}

來源

2017-01-23 08:14:48 levi

帶有不透明背景圖像的引導內容

回答

相關問題