透明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- -o- ， -o- -moz- ， -o- -moz-等），以與透明背景上的角點相匹配，以使陰影具有相同的形狀作為其背后的內容。