半透明の画像のボーダー

画像をコンテナのdiv.imgborderに流し込みたいので、出血を半透明にしたい（不透明なガラスエフェクトのように）。 CSSを使ってこれを達成する方法や、div.imgborderにある不透明度のある画像の背景を設定する方法はありますか？半透明の画像のボーダー

<!DOCTYPE HTML PUBLIC '-//W3C//DTD HTML 4.01//EN' 
     'http://www.w3.org/TR/html4/strict.dtd'> 
<html> 
<head> 
<title></title> 

<meta name='keyword' content=''> 
<meta name='description' content=''> 

<link rel='stylesheet' href='reset.css'> 

<style type='text/css'> 
    body { 
     background-color: #ccc; 
    } 

    div#container { 
     width: 960px; 
     margin-left: auto; 
     margin-right: auto; 
     margin-top: 50px; 
    } 

    img#myimg { 
     overflow: visible; 
    } 

    div.imgborder { 
     background-color: #222; 
     opacity: 0.9; 
     width: 160px; 
     height: 160px; 
     padding: 10px; 
    } 


</style> 

</head> 
<body> 
    <div id='container'> 

     <div class='imgborder' align='center'> 
      <img src='bar.jpg' alt='' width='160' height='160' id='myimg' /> 
     </div> 

    </div> 
</body> 
</html>

出典

2009-03-13 Lorenzo

好きな半透明効果でPNGファイルを作成し、背景として追加することができます。どの現代のブラウザでも、これが正しくレンダリングされ、必要なエフェクトが作成されます。あなたが潜在的に設定することができるようにボーダー-colorプロパティとして

出典

2009-03-13 10:50:32

を言及する価値がクールなサウンド！私はこの解決策が好きです – Lorenzo

のGeckoやWebKitのサポートの設定RGBA（）、：半透明である境界線を持っている..and

border-color: rgba(255,255,255,0.42);

。

しかし、出血を達成するには、イメージに透明なdivをオーバーレイし、イメージの幅と高さに境界線の幅を引いた幅と高さを設定する必要があります。したがって、画像が200x200で2pxの境界線が必要な場合は、境界線の幅が幅/高さのディメンションに追加されることをボックスモデルが指示するため、div 196x196を作成する必要があります。

出典

2009-03-13 10:55:59 Rahul

これは& CSSソリューションJSだったが、

GlassBox-JS

出典

2009-03-13 11:00:56 Dels

半透明の画像のボーダー

答えて

関連する問題