仅 CSS 图像不透明度 [重复]答案

【问题标题】：CSS image opacity only [duplicate]仅 CSS 图像不透明度 [重复]
【发布时间】：2016-07-04 22:14:55
【问题描述】：

它有一个标题图像并且正在使用 Wordpress。我正在尝试使标题图像稍微不透明并将其设置为 opacity: 0.6

但是当我使用时：

site-header{
     opacity: 0.6;
}

它使整个 div 不那么不透明。我进行了研究，但我认为我无法更改使用 Wordpress 的 div。

我怎样才能做到这一点？

是否也可以固定背景图像？现在它重复了，这意味着它有一个奇怪的颜色变化。我想避免这种情况，所以我可以修复它吗？我尝试更改背景附件，但没有奏效。

【问题讨论】：

标签： html css wordpress

【解决方案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;   
}

【讨论】：

【解决方案2】：

您可以使用另一个包含图像的div 并将div opacity 设置为0.6，而不是在css 中设置背景图像。

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

【讨论】：