css添加背景透明度，

最新推荐文章于 2024-08-22 16:10:15 发布

邱志刚

最新推荐文章于 2024-08-22 16:10:15 发布

阅读量808

点赞数

分类专栏： css

本文链接：https://blog.csdn.net/qq_42957741/article/details/103876624

版权

css 专栏收录该内容

11 篇文章 0 订阅

订阅专栏

如果直接在css中添加opacity 整个页面的透明度都会变，后来借鉴到网上案例，
通过伪元素来添加完美解决。

.home {
  height: 800px;
  display: flex;
  flex-direction: column;
  flex: 110%;
  .header_q {
    z-index: 100;
  }
}
.home::after {
  content: "";
  background: url("https://cube.elemecdn.com/4/79/3de10e69d5fee8fc6823b93014c32jpeg.jpeg")
    no-repeat center center / auto 100%;
  background-position: center center;
  opacity: 0.5;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  position: absolute;
  z-index: -1;
  background-position-x: -400px;
}