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

Question

我只是在學習 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>

如果有更好的課程可用於內容，請告訴我。

Answer 1

這應該為你做。 Bootstrap 沒有用於此的組件，因此您只能自己制作。

工作原理：通過將 img 作為父容器中的第一個子元素，它首先被繪制。 absolute定位保證它填充父容器的大小，容器的relative位置意味着子容器的絕對位置是相對於父容器的。 （否則，與身體相比，圖像將是絕對的，並填滿整個窗口）。 然后，繪制文本，並按照在圖像之后定義的那樣，接下來渲染，繪制在圖像之上。

 .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('https://source.unsplash.com/random/800x600'); 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>

Answer 2

嘗試：

.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>

Answer 3

如果您只希望背景圖像（而不是文本）顯示為半透明，請嘗試以下操作：

.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;
}

在 HTML 中，您希望 div 圍繞這樣的內容：

<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>

Answer 4

圖像在背景中褪色，其上的文字沒有褪色。 我相信如果這就是你要找的。

<!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>

Answer 5

背景圖片 css 應該用於容器元素，而不是作為內容內的標簽......

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

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

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

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

問題描述

5 個解決方案

解決方案1
2 已采納 2016-11-08 19:08:58

解決方案2
0 2016-11-08 18:43:38

解決方案3
0 2016-11-08 19:08:27

解決方案4
0 2017-01-23 06:38:14

解決方案5
0

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

問題描述

5 個解決方案

解決方案1 2 已采納 2016-11-08 19:08:58

解決方案2 0 2016-11-08 18:43:38

解決方案3 0 2016-11-08 19:08:27

解決方案4 0 2017-01-23 06:38:14

解決方案5 0

解決方案1
2 已采納 2016-11-08 19:08:58

解決方案2
0 2016-11-08 18:43:38

解決方案3
0 2016-11-08 19:08:27

解決方案4
0 2017-01-23 06:38:14

解決方案5
0