使用 div class 包含使用 CSS 的图像

Question

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

我正在开发一个 salesforce 应用程序，这让我使用这个 apex 标签来放入图像，但我不太习惯使用它们。我现在正在为我创建的一些表格制作打印布局。一切正常，直到我有 2 张图像需要不同的样式。我在 header 中有 1 张图片，还有 1 张图片是表单中的一个框。因为我在 header 中使用一些填充和居中等方式对图像进行样式设置...在我打印时不会显示其他方框图像。所以我想知道我是否可以通过 div 标签分隔 header 图像。这是我目前所拥有的....

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 标签中的 header 图片...没有用，但如果有人有任何 thoughts/solutions 那就太好了....been尝试了一堆差异化方法但没有任何进展。谢谢

编辑：所以我已经把新的 CSS 和一些建议放在一起..所以现在我在我的网站上看到它但是当我去打印表格时......图像没有显示 :/

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

Answer 1

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

试试这个：

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

<div class="logo"></div>

这是 working example.

的代码笔

希望这能回答您的问题。

使用 div class 包含使用 CSS 的图像

Using div class to contain an image using CSS

html

css

image

header