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

我正在使用Wordpress和钢琴黑色主题作为演示pianoblackdemo.wordpress.com。将css不透明度应用于.png的一部分

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

中间的内容使用名为 “侧面” PNG：

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

底部使用了名为 “底” 另一PNG：

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

为了增加这些区域的不透明度，我在这些之上应用了rgba（）背景色3210。

确切的问题是，使用这种方法，它会填充左右边界，这是一个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; 
}

谢谢你的任何帮助，任何人都可以提供。

来源

2015-10-14 Steve0012

您可以在不影响背景的不透明度图像与CSS ...也没有它的任何特定部分。 –

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

来源

2015-10-14 11:57:41

你可以做一个小动作，在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

将需要大量的摆弄虽然排队了这一切

来源

2015-10-14 13:21:22

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

回答

相关问题