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

我刚刚学习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

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

回答

相关问题