0

画像をコンテナ 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>
4

3 に答える 3

2

Gecko と WebKit は rgba() を境界線の色のプロパティとして設定することをサポートしているため、次のように設定できる可能性があります。

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

..そして、半透明の境界線を持っています。

ただし、にじみを実現するには、画像に透明な div をオーバーレイし、画像の幅と高さから境界線の幅を引いた値に等しい幅と高さを与える必要があります。したがって、画像が 200x200 で、2px の境界線が必要な場合は、おそらく div を 196x196 にする必要があります。ボックス モデルでは、境界線の幅が幅/高さの寸法に追加されることが指示されているためです。

于 2009-03-13T10:55:59.683 に答える
1

好きな半透明効果で PNG ファイルを作成し、これを背景として追加できます。最新のブラウザーは、これを正しくレンダリングし、必要な効果を生み出します。

于 2009-03-13T10:50:32.303 に答える