2010-12-13 30 views
1

私は以下のCSSとHTMLを持っています。私は画像の背景を隠そうとしているので、周囲の空白なしで画像を見るだけです。注:私はCSSのnoobieだから穏やかにしてください。笑画像背景を隠す


.boxcontainer { 
    font-size: 12px; 
    position: absolute; 
    left: 100px; 
    top: 20px; 
    width: 300px; 
    z-index: 1000; 
} 

.boxwithicon 
{ 
    background: transparent; 
    background-position: 5px 10px; 
    background-repeat: no-repeat; 
    padding-left: 50px; 
} 

.boxstatus { 
    -moz-border-radius: 10px 10px 10px 10px; 
    background-color: rgba(0, 0, 0, 0.4); 
    border: 3px solid #000000; 
    color: #FFFFFF; 
    /*margin-bottom: 5px; */ 
    padding: 15px; 
    position: relative; 

} 

HTML:

<div class="boxcontainer"> 
<div id="head1" ><b><u>Test</u></b></div> 
<div class="boxstatus boxwithicon"> 
<img src="images/smrsfolderopen.png" alt=""><a href="http://localserver/page">Customers</a> 
</div> 
</div> 

それでは、私は取得していますと、画像ブロックに示す白色の背景と私のイメージです。どの画像でも同様に、実際の画像の周りに空白があります。私はそれが現れるのを望んでいません。うまくいけば、私はこれを正しく説明しています。

-DND

私たちは皆同じページにいると思います。今私はエクスプローラの画像を使用する他のウェブサイトは、私は画像自体をチェックアウトするときに白い背景を持っていますが、ウェブサイト上に表示された透明。例えば、このサイト:link textをチェックし、Simple Exampleボタンをクリックします。ボックスのテキストの横にアイコンが表示されます。彼らはどのようにして白い背景を透明にしていますか?

おかげ

+0

ライブURLでどこかに投稿できますか?私は、CSSで参照される背景イメージは表示されません...? –

+0

http://jsfiddle.net/はコードサンプルを共有するのに最適です –

答えて

0

は、あなたが白の背景を持つイメージを持っていると仮定すると、私はPhotoshopでPNGを開き、背景レイヤーを削除し、それ透過PNGになるだろう。そうすれば、画像の背後にある背景が現れます。

0
.boxcontainer { 
    background: transparent;// you actually want to make sure you're not overriding this in any other elements further up the DOM 
    font-size: 12px; 
    position: absolute; 
    left: 100px; 
    top: 20px; 
    width: 300px; 
    z-index: 1000; 
} 

.boxwithicon 
{ 
    background: transparent; 
    background-position: 5px 10px; 
    background-repeat: no-repeat; 
    padding-left: 50px; 
} 

.boxstatus { 
    -moz-border-radius: 10px 10px 10px 10px; 
    background: transparent;// and NOT a set color. that would make it NOT be transparent... 
    border: 3px solid #000000; 
    color: #FFFFFF; 
    /*margin-bottom: 5px; */ 
    padding: 15px; 
    position: relative; 

} 
0

PNGファイルには透過性があります。しかし、それは画像に透明度が設定されていることを意味するものではありません。私は最初に何が起きているかを見るためにイメージをチェックします。

これ以外にも、空白の原因となるものは見当たりません。 上記のコードでは、画像そのものを対象とするスタイルはありません。

ご質問にお気軽にお問い合わせください。トラブルシューティングのお手伝いをいたします。