时间戳

首页 > 解决方案 > 背景透明但不是文本

html - 背景透明但不是文本

问题描述

我有一个问题...我想让我的背景图片半透明。但是，我希望 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>

另请注意，我在我的文件中使用引导程序。谢谢

标签： htmlcss

解决方案

你错过了很多东西。首先结构本身是错误的。使用这么多 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>

检查片段以了解您可以做什么的小预览/想法。

推荐阅读