Question

它有一个标题图像，正在使用Wordpress。我试图使标题图像略微不透明并将其设置为不透明度：0.6

但是当我使用时：

site-header{
     opacity: 0.6;
}

它使整个div不那么不透明。我已经研究过，我不认为我可以在使用Wordpress时更改div。

我怎样才能做到这一点？

是否也可以修复背景图像？现在它重复，这意味着它有一个奇怪的颜色变化。我想避免这样，我可以修复它吗？我尝试改变背景附件但是没有用。

Answer 1

也许尝试从.site-header中删除背景，然后将以下伪类添加为详细的here和here

.site-header {
   position:relative;
}

.site-header::after {
  content: "";
  background: url("./images/header.png");
  opacity: 0.6;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  position: absolute;
  z-index: -1;   
}

Answer 2

您可以使用包含图片的其他div并将div opacity设置为0.6，而不是在css中设置背景图片。

或者，您可以通过图像编辑器工具（例如opacity，60%或其他工具）编辑图像并将其Photoshop设置为Gimp：）

仅限CSS图像不透明度

2 个答案: