首页　>　文章列表　>　如何使用 CSS 伪元素设置背景图片透明度？

如何使用 CSS 伪元素设置背景图片透明度？

188 2025-02-04

背景图片透明度设置

如何使用 css 设置背景图片的透明度，使其背后的文字清晰可见？

虽然尝试了 background-color: rgba(255, 255, 255, 0.5); 但效果不显。

解决方案

可以使用伪元素代替背景层来实现：

<div class="wrap"></div>

.warp {
  position: relative;
}

.warp:before {
  position: absolute;
  content: "";
  opacity: 0.6; /* 透明度 */
  background-image: url('xxxx');
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

通过设置伪元素的 opacity 属性，可以控制背景图片的透明度，让背后的文字清晰可见。

来源：1731026345

上一篇　如何调整电脑显示屏亮度？简单易学的操作技巧下一篇　如何在面板上翻页显示16个图片和信息，并实现模块靠左显示、内容按行排列？

本类最新

查看更多

如何使用 CSS 伪元素设置背景图片透明度？

本类最新

热门推荐

热门教程