HTML + CSS：如何將陰影（如圖像）添加到圖像？

我試圖從我的畫廊添加到每個圖像的陰影。我知道我可以將CSS陰影添加到每個元素，但是我試圖在我的照片下添加的陰影取自PSD佈局，並且具有與CSS陰影不同的形狀。HTML + CSS：如何將陰影（如圖像）添加到圖像？

這裏的樣品，我想實現： enter image description here

而且我做了什麼至今：

 <div style="padding-left: 15px; position:absolute;"> 
     <img src="avatar.png" alt="" /> 
     <img src="shadow.png" alt="" style="margin: 190px 0 0 -191px; width: 187px;" /> 
     </div>

這是一個可怕的解決方案，甚至更多，它僅適用於Chrome爲我工作。請問你們能否幫助我，如何在所有瀏覽器中更高效地工作？

來源

2012-12-29 user984621

請不要將「謝謝」或其他簽名添加到您的帖子。 – JJJ

@Juhana：哇，第一次聽到有人抱怨謝謝。 – Jawad

@Jawad [你還沒有圍繞meta]（http：// meta。stackexchange.com/questions/tagged/signatures）。 – JJJ

您可能通過建立一個透明的PNG陰影效果，然後把它作爲背景圖像在div中。然後，您可以將圖像添加到該div中，使用css進行定位。

該解決方案適用於所有瀏覽器，即使使用IE6，也可以使用透明PNG。

希望這會有所幫助。

來源

2012-12-29 18:23:47

這是因爲，那個特定的瀏覽器不支持。您可能忽略vendor-prefix

歌劇10.50（目前僅在Windows上使用）是第一個Web 瀏覽器有沒有一個廠商前綴的實現，而 Firefox，Safari和谷歌Chrome瀏覽器都需要它了。因此，該代碼使它在所有的Web瀏覽器上

.shadow { 
    -moz-box-shadow: 3px 3px 4px #000; 
    -webkit-box-shadow: 3px 3px 4px #000; 
    box-shadow: 3px 3px 4px #000; 
}

而且你可以參考這些鏈接

Drop shadow with css for all web browser

Box shadow

來源

2012-12-29 18:19:52 Ravi

如果您的圖片尺寸不規則，SVG作爲背景圖片就是您要查找的內容。可以使用Adobe Illustrator（$$$）或Inkscape（免費）將異常形狀的陰影創建爲SVG文件。從那裏，都應該是必要的是這樣的CSS：

.myImage { 
    background: url(myShadow.svg) no-repeat; 
    background-size: 100% 100%; 
    padding: ? ? ? ?; // the values will have to depend on your bg image 
}

在深入的解釋可以在這裏找到：http://designfestival.com/a-farewell-to-css3-gradients/

如果您的圖片都是相同的大小，或者你不關心任何顆粒感那可能會在調整大小時發生，然後將PNG作爲您的背景也同樣適用。

來源

2012-12-29 20:11:12 cimmanon

-1

這是一個更通用的解決方案，但可能對其他人有用。添加以下到HTML的<head>部分：

<style> 
img {{box-shadow: 5px 5px 5px #888888; }} 
</style>

，並添加陰影，所有圖像偉大的工作。

來源

2016-11-21 18:53:29

HTML + CSS：如何將陰影（如圖像）添加到圖像？

回答

相關問題