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

Posted 2023-03-06

【中文标题】仅 CSS 图像不透明度 [重复]

【英文标题】：CSS image opacity only [duplicate]

【发布时间】：2016-07-04 22:14:55

【问题描述】：

我在http://shivampaw.ml/blog有一个页面

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

但是当我使用时：

site-header
     opacity: 0.6;

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

我怎样才能做到这一点？

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

【参考方案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% :)