如何使用CSS3將外部輝光賦予透明png中的對象？

Question

我正在做一個項目，我需要在超過500張圖片中進行修改，以給予懸停上的外圍效果。我將需要修改每個圖像以提供外部發光。這將是一項非常耗時的任務。

這是一個圖像的例子。所有圖片均爲透明的PNG

是否有可能給使用CSS3的任何技巧瓶子像這樣outerglow效果？

這只是一個圖像的示例，其他圖像的大小和形狀不同。

Answer 1

你可以做的是在你的圖形程序中創建一個發光效果，然後在圖像懸停時應用它作爲背景圖像。你將不得不爲每幅圖像自己發光，但它看起來非常酷。

編輯：我製作了一個程序，可以快速輕鬆地爲您創建發光圖像。你可以下載它在http://thedarkworld.net/projects/imgglow/
希望這會有所幫助。

Answer 2

如果你必須這樣做到500+圖像，我會做的是一個很好的透明PNG的反面瓶子與瓶子周圍的羽毛邊緣，奠定了在底部的背景顏色和DIV的DIV瓶子之間的圖像。這將使純色背景顏色顯現爲淡入到反轉瓶PNG中，並且您只需更改輝光顏色即可更改CSS的值。

寫一些jQuery來讓你輸入十六進制值，你就設置;）

編輯*

問題解決了！

http://phillipjroth.com/stackoverflow/8693733/index.html

編輯19行CSS代碼「背景色」的，它會更新的光芒。 PNG的質量很低，但您可以對它們進行微調以消除脊形邊緣。

Answer 3

這可以使用過濾器（box-shadow）來完成。看看http://demosthenes.info/blog/598/boxshadow-property-vs-dropshadow-filter-a-complete-comparison

這裏是一個演示http://jsfiddle.net/jaq316/EKNtM/

這裏是代碼

<style> 
    .shadowfilter { 
    -webkit-filter: drop-shadow(12px 12px 7px rgba(0, 0, 0, 0.5)); 
    filter: drop-shadow(12px 12px 7px rgba(0, 0, 0, 0.5)); 
} 

.bottleimage { 
    width: 500px; 
} 
</style> 
<img src="http://upload.wikimedia.org/wikipedia/commons/c/ce/Coca_Cola_Zero_bottle.png" class="shadowfilter bottleimage"/> 

Answer 4

這裏是一個插件，我很早就發現，做PNG圖像的伎倆......

用法：

啓用輝光並設置顏色和半徑：

$("#testimg").glow({ radius: "20", color:"green"}); 

禁用輝光：

$("#testimg").glow({ radius: "20", color:"green", disable:true }); 

或

$("#testimg").glow({ disable:true }); 

https://github.com/MisterDr/JQuery-Glow

Answer 5

我發現一個簡單的方法，如果你可以使用photoshop。

您可以在photoshop中打開透明圖像（example.png）並使用模糊工具。 然後模糊整個圖像並保存爲（example-hover.png）。

<div id="img1"> 
    <img src="images/example.png"> 
</div> 

#img1:hover{ 
    background: url('images/example-hover.png') no-repeat 0px 0px;; 
} 

Answer 6

其實你可以用CSS3模糊濾鏡來做到這一點。 在彼此的頂部堆疊僅有2幅圖像並應用以下樣式它的一個：

-webkit-filter: blur(5px); 
-moz-filter: blur(5px); 
-o-filter: blur(5px); 
-ms-filter: blur(5px); 
filter: blur(5px); 

要更改其他圖像的色彩，您可以與其他過濾器如色相旋轉，sephia等方面發揮

Answer 7

就像餡餅一樣容易。您只需使用相同的圖像兩次，一個在另一個之上。

<div class="container"> 
    <img class="main" src="http://www.pngmart.com/files/2/Mario-PNG-Image.png" /> 
    <img class="glow" src="http://www.pngmart.com/files/2/Mario-PNG-Image.png" /> 
</div> 

你只圖像上工作的下方，它的規模一點，亮它，直到它是白色的，然後對其進行模糊處理。然後，您將不透明度設置爲0，並在上面的圖像懸停時將其設置爲1。任何需要

.container { 
    position:relative; 
    background-color:#444444; 
    width:600px; 
    height:600px; 
} 
img { 
    position:absolute; 
    max-height:90%; 
    top:50%; 
    left:50%; 
    transform: translate(-50%, -50%); 
    -webkit-transform: translate(-50%, -50%); 
    transform-origin: 0 0; 
    -webkit-transform-origin: 0 0; 
} 
img.main { 
    z-index:2; 
} 
img.glow { 
    z-index:1; 
    transform: scale(1.01) translate(-50%, -50%); 
    -webkit-transform: scale(1.01) translate(-50%, -50%); 
    filter: brightness(0) invert(1) blur(5px); 
    -webkit-filter: brightness(0) invert(1) blur(5px); 
    opacity:0; 
} 
img.main:hover ~ img.glow { 
    opacity:1; 
} 

沒有使用Javascript。

https://jsfiddle.net/nkq1uxfb/3/

Answer 8

我更喜歡生成這樣洋溢着一點堆積。第一張圖片使用以下CSS過濾器規則：

blur(5px) grayscale(1) sepia(1) saturate(10000%) invert(1) 

這給了你一個比藍色基礎'瓶'發光稍大的圖像。

然後在相同的座標下加載圖像的第二個副本，爲透明背景的瓶子提供透明背景，背景類似於透明背景。