：之前和之後：圖像上的多邊框/背景技巧？

我一直在使用：之前或之後：CSS技巧（在本文中解釋：http://net.tutsplus.com/tutorials/html-css-techniques/quick-tip-multiple-borders-with-simple-css/）實現多個邊框和背景。它在div元素上效果很好，但我注意到它根本不適用於圖像。：之前和之後：圖像上的多邊框/背景技巧？

這裏是我的代碼：

.author img { 
    position: absolute; 
    left: 10px; 
    background-color: #fff; 
    padding: 3px; 
    border: 1px solid #d0d0d0; 
    width: 48px; 
} 

.author img:before { 
    content: ''; 
    display: block; 
    width: 80px; 
    height: 16px; 
    position: absolute; 
    top: -17px; left: 0; 
    background: red; 
}

有沒有用這一招上的圖像的方式或將我包裹我的圖片附加DIV？

來源

2010-08-28 Justine

不確定，但嘗試給圖像'顯示：塊'以及 – 2010-08-28 11:11:13

不，沒有改變任何東西。 – Justine 2010-08-28 17:15:04

這可以在DIV中正常工作，但IMG不會工作，因爲它重疊了正在應用內部邊框的區域。幸運的是，這有一個非常簡單的解決方法：在DIV中包含IMG。

<div><img src="pic.jpg" alt="1" height="200" width="200" /></div>

並應用樣式：

img {border: 2px solid red;} 
div {border: 3px solid black; width:204px; height:204px;}

雖然你不會需要明確設置IMG的高度/寬度在你的HTML，你還需要知道它們是什麼，因爲DIV高度/寬度計算像這樣：div h = img h + img borderx2; div w = img w + img borderx2

來源

2010-08-28 18:49:07 Moses

您必須包裝img，因爲img不能包含僞元素。當:before和:after在CSS中使用，它是什麼概念發電是這種類型的結構（比如，用div;注意，這只是爲了說明正在做什麼，都沒有產生實際的HTML元素）：

<div><pseudo-element:before />Actual div content<pseudo-element:after /></div>

僞元素被放置在裏面的元素是。但img標籤（和input標籤，以及其他沒有結束標籤的非容器）沒有「內容」去處，包括僞元素生成的內容。

來源

2012-05-30 01:20:36 ScottS

：之前和之後：圖像上的多邊框/背景技巧？

回答

相關問題