具有不透明背景图像的引导内容答案

【问题标题】：Bootstrap content with opaque background image具有不透明背景图像的引导内容
【发布时间】：2017-03-22 11:53:44
【问题描述】：

我只是在学习 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>

如果有更好的类用于内容，请告诉我。

【问题讨论】：

您是想让文本位于半透明图像的顶部还是下方？你的问题不清楚。提醒：不透明的意思是“看不透”，半透明的意思是半透明的，透明的，显然是完全看透的。
但是，由于您尝试使用 css opacity 来调整图像的半透明度，因此解决方案是使用绝对定位和 z-indexing，因此将其从渲染流程中取出，允许您的“内容”要呈现在顶部（或下方，取决于 z-indexing 的完成方式）
mix3d 我希望图像在背景中“褪色”，并且“顶部”的文字不褪色。是不是更清楚了？

标签： javascript jquery html css twitter-bootstrap-3

【解决方案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>

【讨论】：

mix3d 不确定您是否收到通知，但我删除了问题以清理此问题。删除您的评论后，我将删除此评论。谢谢

【解决方案2】：

背景图片 css 应该是容器元素，而不是作为内容内的标签...

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

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

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

【讨论】：

【解决方案3】：

图像在背景中褪色，其顶部的文字未褪色。我相信这是否是您正在寻找的。p>

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

【讨论】：

【解决方案4】：

如果您只希望背景图像（而不是文本）显示为半透明，请尝试以下操作：

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

【讨论】：

我认为他混淆了不透明和半透明这两个术语；图像应该是背景并具有透明度，而文本则保持不变。话虽如此，我喜欢分层背景的方法！但是，如果这是预期的，则不会在下面显示任何内容。
是的，这让我错误地使用了这些词，哈。非常正确，我并没有真正考虑到这一点。

【解决方案5】：

试试：

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

【讨论】：

ethercreation, background1 在 html 中应用到哪里了？
我认为他的意思是 <div class="row background1"> 但这不起作用，因为不透明度也会导致文本半透明，因为它们是 div 上标记为降低不透明度的子项。