CSS 透明png作为背景图像
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/8451927/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Transparent png as background-image
提问by siannone
I'm having some issues while using a transparent PNG image as a background image via CSS.
我在通过 CSS 使用透明 PNG 图像作为背景图像时遇到了一些问题。
This is what I get: http://i.imgur.com/EtzMh.png
这就是我得到的：http: //i.imgur.com/EtzMh.png
And this is my CSS code:
这是我的 CSS 代码：
#userBar {
background-color: transparent;
background-image: url('../img/userbarbg.png');
background-position: bottom;
background-repeat: repeat-x;
float: left;
height: 36px;
margin-top: 10px;
width: 100%;
box-shadow: 0 0 5px #888;
}
Am I doing something wrong?
难道我做错了什么？
采纳答案by Noah Witherspoon
You're seeing the box-shadowbehind the background image. The element is still a rectangular box as far as the browser is concerned, so that box shape is what it uses to generate the shadow. You'll need to specify a border-radius(including the various browser prefixes, -webkit-, -moz-, -o-, etc.) that matches that of the corners on your transparent background so the shadow will have the same shape as the content it's behind.
你看到的box-shadow是背景图片的背后。就浏览器而言，元素仍然是一个矩形框，因此框形状是它用来生成阴影的东西。您需要指定一个border-radius（包括各种浏览器前缀 、-webkit-、-moz-、-o-等）与透明背景上的角匹配，这样阴影的形状将与它背后的内容相同。
