1. 首頁
  2. 問答
  3. 不透明度使用CSS3或JS在圖像上淡出？

不透明度使用CSS3或JS在圖像上淡出？

2012-01-24 66 views

回答

0

您可以在圖像上疊加PNG圖像以獲得所需的效果。 IE不能正確渲染部分透明的PNG圖像。對於此瀏覽器，您需要一些解決方法，例如IE PNG Fix。

Demo here

在現代瀏覽器中，你可以使用CSS3 box-shadow屬性用於此目的。

CSS3 demo here

來源

2012-01-24 16:07:41

+0

你只需要PNGFix for IE6。所有其他版本的IE都能在PNG中呈現透明度。 –

+0

IE7及以上版本能夠正確處理.png文件，不是嗎？ –

+0

我不完全確定。有人說IE7上的32位PNG支持仍然存在問題（請參見[wikipedia文章]（http://en.wikipedia.org/wiki/Portable_Network_Graphics#Web_browser_support_for_PNG）） –

0

不知道這是否適合你，但如果你有一個堅實的背景色，你可以淡入淡出中間透明的.png文件，並在圖像頂部的邊緣處顯示純色，所以它看起來像是退色到背景中。

來源

2012-01-24 16:07:08

-1

我不這麼認爲任何這樣的效果是jQuery或jQuery UI可用。如果您打算使用JavaScript解決方案，您將不得不嘗試第三方插件。

我認爲有可能通過Css但不確定跨瀏覽器支持此功能。

來源

2012-01-24 16:07:58 ShankarSangoli

+0

@downvoter - 這是投票選出的？ – ShankarSangoli

1 
<div style="position:relative;height:100px;width:100px"> 
    <div style="position:absolute;z-index:2;width:100%;height:100%;-moz-box-shadow: inset 0 0 5px 5px #fff;-webkit-box-shadow: inset 0 0 5px 5px #fff;box-shadow: inset 0 0 5px 5px #fff;"></div> 
    <img style="position:absolute;z-index:1"src="images/my100.png"></img> 
</div>

這造成了白色的淡入淡出。檢查出一些箱子陰影這裏的CSS http://www.css3.info/preview/box-shadow/

來源

2012-01-24 16:08:35 Michael

+0

這不支持IE 8或更低版本。並沒有給你很多控制，但它是我能想到的唯一的CSS。代碼有點草率，但我相信你可以修復它。我通常不喜歡使用內聯樣式，因爲它們不是很可擴展的... – Michael

+0

啊......我怎麼能忘記盒子陰影？ –

+1

這並不一定允許它「淡入背景」。如果你有一個確定的背景顏色（大多數地方似乎太多），你可以將陰影與背景顏色相匹配。這有效，但使用png淡入淡出將會有更好的方式。對我的解決方案和img淡入淡出的缺點是點擊仍然必須從一個轉移到另一個......煩人 – Michael

0

我用

-webkit-mask-image: -webkit-gradient(linear, left 90%, left bottom, from(rgba(0,0,0,1)), to(rgba(0,0,0,0)));

，可以直接在元素或父元素上使用，並且仍然影響孩子。這很棒！僅適用於webkit。

來源

2013-12-12 22:17:32 light24bulbs

相關問題

 相關問題