如何使用 CSS 在没有背景图像的情况下显示 Div 内的图像？

使用 CSS 在 Div 中显示图像

当涉及到在 div 中显示图像时，使用背景图像似乎是最直接的方法。但是，此方法在阻止 div 调整其大小以适应图像方面存在限制。

要克服此限制并实现 HTML 的

<code%20class=" css alt="如何使用 CSS 在没有背景图像的情况下显示 Div 内的图像？" ><div class="image"></div><p>在 CSS 中，为 </p> <div> 定义一个伪元素。元素并利用 content 属性来指定图像 URL。<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 中成功测试。为了保证不同浏览器的兼容性，建议在不同环境下验证其功能。