divの上にオーバーレイパターン（png）を追加

Question

HTMLを使用して特定のdivの画像URLを使用してオーバーレイを追加する方法はありますか？

私はCSSを使って何かを動作させるために管理：

#myDiv { 
    width: 100%; 
    height: 100%; 
    background: url(image.jpg) no-repeat; 

} 
#myDiv:before { 
    content: ''; 
    position: absolute; 
    top: 0; 
    right: 0; 
    bottom: 0; 
    left: 0; 
    background: transparent url(http://tympanus.net/Tutorials/CSS3FullscreenSlideshow/images/pattern.png) repeat top left; 
    opacity: .6; 
} 

しかし、それは少しトリッキーです。私が他の部門のために同じことをしようとしたとき、それは動作しませんでした。例えば、私はdiv用のこのCSSコードを持っています：

.hi-icon-wrap img 
{ 
    border-radius: 80px; 
    width: 153px; 
    height: 153px; 
    margin:2%; 
} 

オーバーレイを追加したいと思います。私はこのスクリプトを使用していますが、成功しません：

.hi-icon-wrap img:before { 
    background: transparent url(http://tympanus.net/Tutorials/CSS3FullscreenSlideshow/images/pattern.png) repeat top left; 
    opacity: .6; 
} 

私もテストしている：

.hi-icon-wrap img:before { 
    content: ''; 
    position: absolute; 
    top: 0; 
    right: 0; 
    bottom: 0; 
    left: 0; 
    background: transparent url(http://tympanus.net/Tutorials/CSS3FullscreenSlideshow/images/pattern.png) repeat top left; 
    opacity: .6; 
} 

UPD：

は

HTMLスクリプトは：

<div class="hi-icon-wrap" class="hi-icon-wrap img" style="text-align: center"> 
    <img src="image.png"> 
</div> 

Answer 1

あなたはオーバーレイを使用する必要がありますon div要素ではなく、img

#myDiv { 
 
    position: relative; 
 
    display: inline-block; 
 
    border-radius: 80px; 
 
    overflow: hidden; 
 
} 
 
#myDiv:before { 
 
    content: ''; 
 
    position: absolute; 
 
    top: 0; 
 
    right: 0; 
 
    bottom: 0; 
 
    left: 0; 
 
    background: url(http://tympanus.net/Tutorials/CSS3FullscreenSlideshow/images/pattern.png) repeat top left; 
 
    opacity: .8; 
 
} 
 
img { 
 
    vertical-align: top; 
 
}

<div id="myDiv"> 
 
    <img src="http://placehold.it/150x150/D6E7FF/ffffff"> 
 
</div>

編集：画像要素がテキストを含むか、子孫を持っていないので、あなたがここにDemoを見ることができるようにあなたがimgに:afterまたは:beforeを使用することはできませんので、あなたが何ができるかラップIMGです例えばdivの場合はDemo