使用 div 类包含使用 CSS 的图像答案

【问题标题】：Using div class to contain an image using CSS使用 div 类包含使用 CSS 的图像
【发布时间】：2015-03-19 19:56:26
【问题描述】：

大家好，我有一个与 HTML/CSS 相关的问题...

我正在开发一个 salesforce 应用程序，这让我使用这个 apex 标记来放置图像，但我不太习惯使用它们。我目前正在为我创建的某些表单制作打印布局。一切都很好，直到我有 2 张图片需要以不同的方式设置样式。我在标题中有 1 张图片，还有 1 张图片是表格中的一个框。因为我在标题中设置了图像的样式，并在其他内容中添加了一些填充和居中...当我去打印时，另一个框图像不会显示。所以我想知道我是否可以通过 div 标签分隔标题图像。这是我到目前为止所拥有的......

HTML：

<div class="logo_print"></div>

CSS：

 .logo_print{
    float:left;
    padding-left: 40px;
    width: 64px;
    height: 86px;
    background-image:url('../css_images/seal2.png');
}

所以这是我放在 div 标签中的标题图像...没有用，但如果有人有任何想法/解决方案会很棒...。一直在尝试一堆不同的方法，但没有任何进展。谢谢

编辑：所以我在新的 CSS 中加入了一些建议......所以现在我在我的网站上看到了它，但是当我去打印表格时......图像没有显示出来：/

哦，我正在使用@media print 将 CSS 放入

【问题讨论】：

标签： html css image header

【解决方案1】：

它不起作用的原因是您没有在 CSS 中指定高度和宽度。

试试这个：

.logo {
  background-image: url('http://pixelative.co/wp-content/uploads/2014/06/logo2.png');
  width: 209px;
  height: 52px;
}

&lt;div class="logo"&gt;&lt;/div&gt;

这是working example 的codepen。

希望这能回答你的问题。

【讨论】：

好的，所以这适用于它出现在我的网站上....但是当我去打印它时，图像没有显示出来....有什么想法吗？我更新了我的新代码
您可以在 safari 或 chrome 中显示，在其他浏览器中使用 @media print { * {-webkit-print-color-adjust:exact;} }，恐怕您需要在 html 中使用“img”标签。如需进一步阅读，请查看http://stackoverflow.com/questions/5949897/how-to-get-a-background-image-to-print-using-css