どのように透明な画像を表示するには？

Question

イメージの周囲にグラデーションスタイルを表示しようとしています。これは機能します。イメージが存在しない場合、つまりsrc = ""とすると、まだこのグラデーションスタイルを表示したいのですか？

HTML

<style> 
    .mystyle 
    { 
     position: relative; 
     float: right; 
     right: -1px; 
     margin: 0; 
     padding: 12px 0; 
     background-image: -moz-linear-gradient(left,rgba(255,255,255,1) 0%,rgba(255,255,255,.625) 50%,rgba(0,0,0,.25) 100%); /*FF3.6+*/ 
     background-image: -webkit-gradient(linear,left top,right top,color-stop(0%,rgba(255,255,255,1)),color-stop(50%,rgba(255,255,255,.625)),color-stop(100%,rgba(0,0,0,.25))); /*Chrome,Safari4+*/ 
     background-image: -webkit-linear-gradient(left,rgba(255,255,255,1) 0%,rgba(255,255,255,.625) 50%,rgba(0,0,0,.25) 100%); /*Chrome10+,Safari5.1+*/ 
     background-image: -o-linear-gradient(left,rgba(255,255,255,1) 0%,rgba(255,255,255,.625) 50%,rgba(0,0,0,.25) 100%); /*Opera 11.10+*/ 
     background-image: -ms-linear-gradient(left,rgba(255,255,255,1) 0%,rgba(255,255,255,.625) 50%,rgba(0,0,0,.25) 100%); /*IE10+*/ 
     background-image: linear-gradient(left,rgba(255,255,255,1) 0%,rgba(255,255,255,.625) 50%,rgba(0,0,0,.25) 100%); /*W3C*/ 
     filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffffff',endColorstr='#40000000',GradientType=1); /*IE6-9*/ 
    } 
</style> 
<div id="mydiv" class="mystyle"> 
    <img id="img1" src=Chrysanthemum.jpg style="border-width: 0px;"> 
</div> 

Answer 1

あなたはこのようなあなたのIMGにopacityを与えることができます：シンプルなPNGとして全体を作成

img 
{ 
opacity:0.4; 
filter:alpha(opacity=40); /* For IE8 and earlier */ 
}