•  22-07-2019
  •  | 
  •  

質問

画像をコンテナ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>
役に立ちましたか？

解決

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

他のヒント

GeckoとWebKitは、rgba（）をborder-colorプロパティとして設定することをサポートしているため、次のように設定できます：

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

..そして半透明の境界線があります。

ただし、ブリーディングを行うには、おそらく画像に透明なdivをオーバーレイし、画像の幅と高さから境界線の幅を引いた幅と高さを与える必要があります。画像が200x200で、2pxの境界線が必要な場合、ボックスモデルでは境界線の幅が幅/高さの寸法に追加されるように指示されているため、おそらくdiv 196x196を作成する必要があります。

これはjs＆amp; CSSソリューションですが、言及する価値があります

GlassBox-JS

ライセンス： CC-BY-SA と 帰属
所属していません StackOverflow
scroll top