html - 提供背景图像和不透明度

标签 html css background-image opacity

我正在尝试为我的整页背景图像设置不透明度,但是当我添加不透明度代码时,我的整个 html 的不透明度为 0.4,图像除外。

html { 
  background: url(../img/bg2.jpg) no-repeat center center fixed; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

Source

我试着像这样添加不透明度:

html { 
  background: url(../img/bg2.jpg) no-repeat center center fixed; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  opacity: 0.4;
}

但正如我所说,我的整个 html 变成了 0.4

我尝试在 background: url(../img/bg2.jpg) no-repeat center center fixed 0.4; 之后添加 0.4,但我的图像随后就变成了空白。

如何将 0.4 仅添加到我的背景图像?

最佳答案

尝试使用 ::after 伪类:

html::after {
  content: "";
  background: url(../img/bg2.jpg) no-repeat center center fixed; 
 -webkit-background-size: cover;
 -moz-background-size: cover;
 -o-background-size: cover;
  background-size: cover;
  opacity: 0.4;  
  position: absolute; 
  top: 0; 
  left: 0; 
  right: 0; 
  bottom: 0;
  z-index: -1;
}

关于html - 提供背景图像和不透明度,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/33889762/

上一篇:html - 使用 css 垂直居中内容,如何删除空白区域?

下一篇:css - 在 Bootstrap 中制作 4 个响应框

相关文章:

javascript - Web 服务器上的 html 页面的 XMLHttpRequest 但不在开发中

javascript - reshape HTML/CSS 中的视频元素

javascript - 如何在搜索栏中添加 X 标签

html - chrome 上的链接样式表具有奇怪的过渡行为

jquery - 使用 jQuery 从背景图像获取尺寸

jquery - 如何只为背景指定类名?

css 多类/id 选择器?

javascript - 使用 css、jquery 在单击图标时实现 Mac 样式

jquery - 拥有适用于所有设备的图像背景的正确方法是什么?

css - 使 anchor 标记拉伸(stretch)为其背景图像的大小