如何使用 CSS 在沒有背景圖片的情況下顯示 Div 內的圖片？

使用CSS 在Div 中顯示影像

當涉及在div 中顯示影像時，使用背景影像似乎是最直接的方法。但是，此方法在阻止 div 調整其大小以適應圖像方面存在限制。

要克服此限制並實現HTML 的

<code%20class=" css alt="如何使用 CSS 在沒有背景圖片的情況下顯示 Div 內的圖片？" ><div class="image"></div><p>在 CSS 中，為 </p> <div> 定義一個偽元素。元素並利用 content 屬性來指定圖像 URL。 <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false"><code class="css">div.image::before { content: url(http://placehold.it/350x150); }</code>

登入後複製

其他資訊：

content 屬性允許將內容動態插入偽元素，包括影像。透過引用此屬性中的圖像 URL，您可以在 div 中顯示圖像。

有關使用CSS 實現此解決方案的全面信息，請參閱以下資源：

• [CSS 技巧：使用CSS 內容](http://css-tricks.com/ css-content/)

相容性：

所呈現的方法已在Mac 作業系統上的Chrome、Firefox 和Safari 中成功測試。為了確保不同瀏覽器的兼容性，建議在不同環境下驗證其功能。