Question

我正在尝试使用CSS和HTML将图像插入网页。

我在CSS上有以下内容：

#eDTP {
background-image: url(eDTP.png);
background-repeat: no-repeat;
background-position: center;
padding-top:475px;
}

在我的HTML中，我有：

<div id="maintext"> 
<p> my page </p>
</div>
<div id="eDTP"></div>

虽然这样可行，但我在图像的顶部和底部有一个很大的空白区域，这是我不想要的。我尝试调整填充值，但这似乎没有帮助。

有谁能指出我正确的方向摆脱这些空白？

Answer 1

我会删除填充顶部。这应该可以消除这个问题。我不确定为什么你们之间需要如此大量的填充。

编辑 - 只是读到你说填充没有帮助你。有没有机会链接到网址？或者在某个地方有一个实例来更详细地看问题？

Answer 2

确保图形或周围元素的line-height设置为line-height:1;

Answer 3

您指定的唯一尺寸是padding。背景图像的大小不会影响元素的大小。您应该删除padding，并为元素指定width和height，使其与图片的大小相同。

Answer 4

不可思议的是，HTML / CSS无法做到这一点。这样做的唯一方法是通过javascript在服务器或客户端插入值。您应该使用<img>元素中的<div>标记来执行此操作。

确保指向要显示的图像的正确位置，并将其显示在调用它的文件夹中。

http://jsfiddle.net/gKFAT/

Answer 5

在这里，您尝试将图像显示为div的背景。是否真的有理由不使用上面的html？

<div id="maintext"> 
<p> my page </p>
</div>
<div id="eDTP">
  <img src="eDTP.png">
</div>

如果是这样，你需要指定di的尺寸，因为它不能自动适合背景尺寸（我认为这并不奇怪）。

尝试

#eDTP {
background-image: url(eDTP.png);
background-repeat: no-repeat;
background-position: center;
width: 120px; //background image width here
height: 150px; // and height here
}

Answer 6

你最大的问题是宽度和高度。另外，您希望如何显示此图像？你想要它在文本下方，文本旁边等吗？在现代浏览器中，div完全折叠，其高度等于0.默认情况下，其宽度为100％。 IE7及更高版本的高度不适用于这种方式。

您需要指定div容器的宽度和高度，而不是填充，eDTP，也就是说，如果您希望通过CSS添加背景图像。如果您希望使用img标签填充eDTP图像，则不必指定高度。

顺便说一句，你看到填充图像的原因是基于一种叫做盒子模型的东西。填充扩展了背景颜色的可见区域，背景图像等。您拥有的填充功能就像您将高度分配给其容器一样。但正如我之前所说，这是一个非常糟糕的方法。将其添加到您的eDTP声明中：

#eDTP {
background: url(eDTP.png) no-repeat center;
width:500px; /* Change this value to the width of your image */
height:475px;/* I assume this is the height of your image */
}

CSS HTML图填充

6 个答案: