HTML + CSS：如何將陰影（作為圖像）添加到圖像？
[英]HTML+CSS: How to add shadow (as image) to image?
問題描述
我想嘗試從我的畫廊添加陰影的每個圖像。 我知道我可以為每個元素添加CSS陰影，但是我想在我的照片下添加的陰影是從PSD布局中獲取的，並且具有與CSS陰影不同的形狀。
這是樣本，我想要實現的目標：
直到現在我做了什么：
<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。 請各位幫助我，如何在所有瀏覽器中更有效率地工作？
4 個解決方案
解決方案1
3 2012-12-29 20:11:12
如果您的圖像尺寸不規則，那么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作為您的背景也會起作用。
解決方案2
2 已采納 2012-12-29 18:23:47
您可以為陰影效果創建透明PNG，然后將其作為背景圖像放在div中。 然后，您可以將圖像添加到該div中，使用css定位。
這個解決方案適用於所有瀏覽器，即使使用IE6也可以使用透明的png。
希望這可以幫助。
解決方案3
1 2012-12-29 18:19:52
這是因為該特定瀏覽器不支持。 您可能缺少vendor-prefix
Opera 10.50（目前僅在Windows上可用）是第一個沒有供應商前綴的實現的Web瀏覽器，而Firefox，Safari和Google Chrome現在都需要它。 因此，此代碼使其適用於所有這些Web瀏覽器
.shadow {
-moz-box-shadow: 3px 3px 4px #000;
-webkit-box-shadow: 3px 3px 4px #000;
box-shadow: 3px 3px 4px #000;
}
您還可以參考這些鏈接
解決方案4
0 2016-11-21 18:53:29
這是一個更通用的解決方案，但可能對其他人有用。 我將以下內容添加到HTML的<head>部分：
<style>
img {{box-shadow: 5px 5px 5px #888888; }}
</style>
它非常適合為所有圖像添加陰影。
如何在不滾動圖像的情況下使用html + css使背景圖像全屏顯示
[英]How to make background-image full-screen with html+css without scrollin on image
如何在Prestashop中將動畫（html + css）文本添加到HomeSlider圖像中
[英]How to add animated (html+css) text to HomeSlider images in Prestashop
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.