作为背景图象的透明png

Question

通过CSS将透明PNG图像用作背景图像时，我遇到了一些问题。

这就是我得到的：http://i.imgur.com/EtzMh.png

这是我的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;
}

我做错了吗？

Answer 1

您在背景图片后面看到box-shadow。就浏览器而言，该元素仍然是一个矩形框，因此框形状是用于生成阴影的形状。您需要指定一个border-radius（包括各种浏览器前缀，-webkit-，-moz-，-o-等），与您透明背景上的角落相匹配所以阴影的形状与其背后的内容相同。