16

画像に透明な境界線を作成し、CSS を使用して画像の上に配置しようとしています。

たとえば、次の画像を参照してください。

ここに画像の説明を入力

これを達成するために、次のコードを試しましたが、次の問題に直面しています。

  1. 境界線は画像の上にはありません。画像の周りにあり、画像が親div内に100％収まらないようにします

  2. 境界線を透明にするために「不透明度」を使用しましたが、画像も透明にしてしまい、望ましくありません。

ここでコードをライブで確認できます: http://jsfiddle.net/6GK45/

div を作成し、境界線の色を透明にして画像の上に配置することはできますが、問題は画像の幅が固定されている (277px) ことですが、高さは固定されていません。したがって、これは私にはうまくいきません。

透明な画像の境界線を作成し、上の画像のように画像の上に配置する方法を教えてください。

HTML:

<div class="box" >  
   <img class="lightbox" src="myimage.jpg" />
   This is text
</div>

CSS 

.box {
    width:277px; 
    background:#FCFBDF;    
}

.lightbox {
    border: 5px solid red;
    z-index:999; 
    opacity:0.3; 
}

img {
    width:277px;
}
4

5 に答える 5

5

これについてまだグーグルで調べている人のために：プロパティを使用することによってのみCSSでこの効果を達成することができoutlineます：

img {
  outline: 15px solid rgba(255, 0, 0, .75);
  outline-offset: -15px;
}
<img src="http://i.dailymail.co.uk/i/pix/2012/12/04/article-2242647-0F79C42300000578-201_634x429.jpg" width=250 />

于 2016-03-01T11:49:28.657 に答える
2

不透明な境界線が必要な場合は、RGBAコードを使用できます。「A」は を意味するためalpha、不透明度を変更できます。

border: 5px solid rgba(255,0,0, 0.3) ;

z-index画像とボックスを絶対位置、相対位置に配置すると、画像の上に境界線のあるボックスを配置するために使用できます。

于 2013-09-26T19:43:51.327 に答える
0

私はあなたのフィドルを更新しました。 http://jsfiddle.net/6GK45/21/

あなたがする必要があるのは、画像を親divの背景として設定し、子divの幅/高さを調整してそれに応じて画像を抱き締めることです.

//make js fiddle work
于 2013-09-26T19:51:09.537 に答える