如何顯示透明img？

我想在我的圖像周圍顯示漸變樣式。這工作。當圖像不存在，即src =「」，那麼我仍然想顯示這種漸變風格？如何顯示透明img？

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>

來源

2012-02-13 user603007

創建整個事情作爲一個簡單的PNG？ – IrishChieftain 2012-02-13 03:45:02

你可以給opacity您IMG這樣的：

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

來源

2012-02-13 03:47:21 sandeep

這不是回答這個問題嗎？ – joshnh 2012-02-13 04:04:27

@joshnh，你能給我一個原因，你爲什麼給我一個downvote。 – sandeep 2012-02-13 04:06:38

因爲這不是OP要求的答案（正如我上面的評論所暗示的）。 – joshnh 2012-02-13 04:11:17

如何顯示透明img？

回答

相關問題