以下是CSS实现背景图片透明而文字不透明效果的两种方法的完整攻略：

方法一：使用伪元素

首先，我们需要在HTML文件中指定背景图片和需要显示的文本。例如，在下面的代码中，我们选择使用一张名为bg.jpg的背景图片，并在页面中显示一行文字“Hello World!”：

<body>
  <div class="container">
    <p>Hello World!</p>
  </div>
</body>

然后，在CSS文件中添加以下代码，使用::before伪元素作为背景图片的容器，并使用opacity属性来控制背景图片的透明度：

.container {
  position: relative;
  z-index: 1;
}

.container::before {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: url(bg.jpg) no-repeat center center;
  background-size: cover;
  opacity: 0.5;
  z-index: -1;
}

接下来，我们需要为文本设置一个高于伪元素所在图层的z-index属性值。这样，我们就可以实现背景图片透明，而文本不透明的效果：

p {
  position: relative;
  z-index: 2;
}

这样，我们就完成了使用伪元素实现背景图片透明而文字不透明效果的方法。

方法二：使用多重背景

使用多重背景可以让我们在同一个元素中嵌入多张背景图片，从而实现更加复杂的背景效果。这里，我们同样需要在HTML文件中指定背景图片和需要显示的文本：

<body>
  <div class="container">
    <p>Hello World!</p>
  </div>
</body>

然后，在CSS文件中添加以下代码，指定需要嵌入的背景图片，并使用rgba颜色值来控制背景图片的透明度：

.container {
  background-image:
    linear-gradient(rgba(255, 255, 255, 1), rgba(255, 255, 255, 1)),
    url(bg.jpg);
  background-size: auto, cover;
  background-repeat: no-repeat;
  background-position: center center;
}

这样，我们就可以实现背景图片透明，而文本不透明的效果。

其中，linear-gradient()函数用于指定需要嵌入的白色背景图片，并使用rgba颜色值指定透明度，以达到背景图片透明的效果；url()函数用于指定需要嵌入的背景图片，并使用cover值指定图片的尺寸适应方式。使用auto值让第一张背景图片的尺寸自适应元素的大小；使用center center值使背景图片在元素中水平和垂直居中。

最后，我们同样需要为文本设置一个高于背景图片所在图层的z-index属性值：

p {
  position: relative;
  z-index: 2;
}

这样，我们就完成了使用多重背景实现背景图片透明而文字不透明效果的方法。

示例1：伪元素实现

<body>
  <div class="container">
    <p>Hello World!</p>
  </div>
</body>

.container {
  position: relative;
  z-index: 1;
}

.container::before {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: url(https://picsum.photos/id/237/536/354) no-repeat center center;
  background-size: cover;
  opacity: 0.5;
  z-index: -1;
}

p {
  position: relative;
  z-index: 2;
}

示例2：多重背景实现

<body>
  <div class="container">
    <p>Hello World!</p>
  </div>
</body>

.container {
  background-image:
    linear-gradient(rgba(255, 255, 255, 1), rgba(255, 255, 255, 1)),
    url(https://picsum.photos/id/237/536/354);
  background-size: auto, cover;
  background-repeat: no-repeat;
  background-position: center center;
}

p {
  position: relative;
  z-index: 2;
}

希望以上内容对您有所帮助。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：CSS实现背景图片透明而文字不透明效果的两种方法 - Python技术站

CSS实现背景图片透明而文字不透明效果的两种方法

方法一：使用伪元素

方法二：使用多重背景

相关文章