Css不透明度应用于.png的一部分[关闭]答案

【问题标题】：Css opacity applied to a part of a .png [closed]Css不透明度应用于.png的一部分[关闭]
【发布时间】：2015-10-20 01:01:11
【问题描述】：

我正在使用 Wordpress 和钢琴黑色主题，可在 pianoblackdemo.wordpress.com 上作为演示使用。

此主题包含我更改的背景，导致底部和内容（中间）区域需要更多不透明度以使文本可读。

中间的内容使用了名为“side”的png：

https://pianoblackdemo.wordpress.com/wp-content/themes/pub/piano-black/img/side.png

底部使用另一个名为“bottom”的png：

https://pianoblackdemo.wordpress.com/wp-content/themes/pub/piano-black/img/bottom.png

为了增加这些区域的不透明度，我在.png 之上应用了 rgba() 背景颜色。

确切的问题是，使用这种方法，它填充了一个 4 像素渐变灰色的左右边框，导致渲染难看。在底部，它填充了右下角和左下角的空白部分。

至于中间部分：有没有办法应用rgba()同时忽略左右渐变边框？

至于底部：我认为一种方法是仅将rgba 应用于底部图像的前半部分（同时仍然忽略左右渐变侧），但我不知道如何也可以这样做。

我尝试在 Gimp 上编辑图像不透明度，但没有成功。不透明度已达到 100%。

要对那些 .png 应用不透明度，这就是我所做的：

#middle-contents {
background:url(img/side.png);
repeat-y;
padding-bottom:5px; 
background-color: rgba(32, 32, 32, 0.90); 
}

至于底部.png，代码为：

#footer {
background:url(img/bottom.png) no-repeat top;
height:114px;
margin-bottom:50px; 
}

感谢您提供的任何帮助。

【问题讨论】：

你不能用 CSS 影响背景图像的不透明度......也不能影响它的任何特定部分。

标签： wordpress css png opacity

【解决方案1】：

没有 CSS 解决方案可以实现这一点。您可能想使用 Photoshop 打开图片并对其进行修改以满足您的需要。

【讨论】：

【解决方案2】：

您可以做一个小技巧，在 psudo 元素上运行背景图像。像这样；

HTML

<div class="content">
   Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus urna nisi, aliquet a lacinia sit amet, interdum vitae magna. Aliquam non velit tempus, consectetur arcu malesuada, placerat risus. Lorem ipsum dolor sit amet.
</div>

CSS

.content {
   width: 50%;
}
.content:after {
      content:"";
      width: 50%;
      height: 300px;
      background: url(http://lorempixel.com/400/200/sports/);
      position: absolute;
      top:0;
      left: 0;
      z-index:-1;
      opacity: 0.3;
    }

https://codepen.io/bajere/pen/avLZKq

不过需要大量的玩，才能排好队

【讨论】：