BoxShadow：插入img標籤

2011-10-04 122 views 10 likes

我試圖在圖像上創建浮雕效果（如寶麗來）。所以應該有一個頂部的盒子陰影和左邊緣插入圖片。但它不工作......這是一個瀏覽器問題：BoxShadow：插入img標籤

我已經創建了一個jsfiddle http://jsfiddle.net/PEgBv/25/來顯示我想要的。

我喜歡它在第二個div盒（它在工作的地方）。但在圖像上，影子只顯示沒有inset屬性。

與chrome14工作在Linux上

screenshot from Chrome14 on linux

2011-10-04 itshorty

剛剛在win7上用ie9，ff6，chrome14和safari試過......也不行！ – itshorty

我不知道我是否稱它爲瀏覽器問題。圖像只是在陰影的頂部呈現，所以沒有出現。你可以[告訴你是否使用透明圖片]（http://jsfiddle.net/LJcWE/） – OverZealous

如果你仔細看看你的例子，你會發現文本'foo'也被渲染在頂部。 – OverZealous

回答

CSS3插圖陰影不會在圖像上工作，但有一種變通方法，

2011-10-04 08:08:26 gtamil

解決方法不適用於max-width: 100%;和height: auto;的圖像，這些圖像通常用於流體設計中，以使圖像自動縮放，直到達到原始寬度。要使周圍的<a>（或任何元素）展開以覆蓋所有需要添加顯示的內容（圖像）：inline-block;對它來說，否則陰影將不會如預期般顯示。

因此，除了建議的解決方法中的樣式之外，display: inline-block;應該添加到類.img-shadow。

2013-04-03 11:43:46 Grantzau

如果您在背景上使用圖像，它將工作。因此，不要使用img標籤，而應使用background-image: url(source.jpg);的css文件或樣式屬性。箱形陰影呈現在背景圖像的頂部。

2014-03-17 14:53:43 Nerva

相關問題