logo标签列表

透明PNG作为背景图像

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

我做错了什么吗？

2
有什么问题吗？边框吗？应用 border-radius 来解决问题，例如 border-radius:5px;。如果支持 box-shadow，那么也支持 border-radius。 - Rob W
嗯...那个PNG的角应该是透明的，但它们却是黑色的:S - siannone
@MaterMorbi ...(离题) 你知道你可以这样做：background: #000 url(someImage.jpg) no-repeat 20px 20px，其中的第一个20px是“左边”，而下一个则是“顶部”背景位置吗？:) - Roko C. Buljan
@roXon 感谢，我不知道，但是我很感激你的提示 :) - siannone
1个回答
1

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

谢谢 :) 我以为图片有问题。 - siannone
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接