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没有这方面的组件，所以你自己就陷入困境。

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

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

图像在背景中褪色，文本在其上面没有褪色。我相信如果这就是你要找的东西。

UART_write(42)

Answer 5

背景图片css应该是容器元素的，而不是内容中的标记......

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

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

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

带有不透明背景图像的Bootstrap内容

5 个答案: