2011-12-09 30 views
2

透明なPNG画像を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'もサポートします。 –

+0

まあ...そのpngの角度は自分で透明にするべきですが、代わりに黒です:S – siannone

+0

@MaterMorbi ...(offtopic)あなたはあなたができることを知っています:#000 url(someImage.jpg)no -repeat 20px 20px'、最初の20ピクセルは「左」で、次は「トップ」バックグラウンドポジションですか? :) –

答えて

1

背景画像の背後にbox-shadowが表示されています。この要素は、ブラウザが関係する限り四角形のボックスであるため、ボックスの形状は影を生成するために使用されます。透明な背景のコーナーに一致するborder-radius(さまざまなブラウザの接頭辞、-webkit--moz--o-など)を指定する必要があります。そのため、影は後ろのコンテンツと同じ形になります。

+0

ありがとう:)私は画像に何か問題があると思った。 – siannone

関連する問題