背景透明但不是文本[重复]答案

【问题标题】：Background Transparent but not Text [duplicate]背景透明但不是文本[重复]
【发布时间】：2018-10-29 22:03:40
【问题描述】：

我遇到了问题...我想让我的背景图片半透明。但是，我希望 div 中的文本完全可见。有小费吗？提前致谢

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Stack</title>
    <style type="text/css">

#recipebackground{
      /* The image used */
    background-image: url("../imgs/ajiacobackground.jpg");

    /* Full height */
    height: 50%; 
    /* Center and scale the image nicely */
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    /*opacity*/
    opacity: 0.5;
}

    </style>
</head>
<body>

<section id="recipebackground" class="opacitybox">

<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
  <section>
<div class="container" >
<h1 style="font-size: 350%;" class="text-center"><b>It's Lunch-Time!</b></h1>
</div>
</section>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
</body>
</html>

另外请注意，我在我的文件中使用了 bootstrap。谢谢

【问题讨论】：

标签： html css

【解决方案1】：

你错过了很多东西。首先结构本身是错误的。使用这么多 br 标签是不正确的。考虑到您是此门户的新手，您应该对背景不透明度进行更多研究。

.container{
  position: relative;
      /* The image used */
    background-image: url("https://www.elephantsdeli.com/wp-content/uploads/fly-images/1673/elephants-delicatessen-sack-lunch-order-form-hero-image.jpg-1920x1080.jpg");

    /* Full height */
    height:100vh; 
    /* Center and scale the image nicely */
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}
.background {
  height: 100vh;
  background: rgba(255 , 255, 255, 0.5)
}
.text-center {
  padding:50px 0;
}

<div class="container" >
<div class="background">
  <h1 style="font-size: 350%;" class="text-center"><b>It's Lunch-Time!</b></h1>
  </div>
</div>

检查 sn-p 以了解您可以做什么的小预览/想法。

【讨论】：

附带说明：当且仅当您应用不透明度的背景颜色与图像的背景颜色相同时才有效
这行得通，有点；看，当使用引导程序时，它不会完全使图像透明，而是侧面会显示图片的正常不透明度.....
自己看看吧..