Question

我正在使用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; 
}

感谢您提供任何帮助。

Answer 1

没有CSS解决方案来实现这一目标。您可能希望使用Photoshop打开图片并进行修改以满足您的需求。

Answer 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

虽然需要很多游戏，但要排好队伍

Css不透明度应用于.png的一部分

2 个答案: