CSS HTML圖形填充

我正在嘗試使用CSS和HTML將圖像插入網頁。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>

雖然這個作品，我對的頂部和底部一個白色的大空間圖像，我不想要。我試着調整填充值，但這似乎並沒有真正的幫助。

任何人都可以請指出我在正確的方向擺脫這些空白？

來源

2011-07-24 AJW

我會刪除填充頂部。這應該可以消除這個問題。我不確定爲什麼你需要在它們之間填充這麼高的填充量。

編輯 - 只是讀你說填充沒有幫助你。任何鏈接到該網址的機會？或者在某個地方看到更詳細的問題的實例？

來源

2011-07-24 23:22:32

如果我刪除填充，該圖消失。 – AJW

您指定的唯一尺寸是padding。背景圖像的大小不會影響元素的大小。您應該刪除padding，併爲該元素指定width和height，以便它與圖像的大小相同。

來源

2011-07-24 23:28:36 Guffa

我試過使用寬度和高度：根據圖像大小，但我仍然看到圖像頂部和底部的空白 – AJW

@James W：你是否已經在Photoshop（或其等價物）中打開了圖像並驗證了圖像本身在其邊界沒有任何空格？ – Moses

不幸的是，在HTML/CSS中沒有辦法做到這一點。唯一的方法是通過javascript在服務器或客戶端插入值。您應該像元素那樣用<img>標籤來做到這一點。

確保您指向要顯示的圖像的正確位置，並將其顯示在正在調用的文件夾中。

http://jsfiddle.net/gKFAT/

來源

2011-07-24 23:29:38 sed

在這裏你嘗試顯示的圖像作爲一個DIV的背景。有沒有真正強大的理由不使用上述的HTML？

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

如果是這樣，你需要指定迪的dimentions，「因爲它不自動調整背景大小（在這裏沒有驚喜，我認爲）。

嘗試

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

來源

2011-07-25 11:49:17 Bardt

確保數字的line-height或周圍的元素被設置爲line-height:1;

來源

2011-12-02 22:07:50 jarvisjones

你最大的問題是寬度和高度。另外，你想如何顯示這個圖像？你想要它在文本下面，在文本旁邊嗎？在現代瀏覽器中，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 */ 
}

來源

2011-12-30 21:48:03 Pegues

CSS HTML圖形填充

回答

相關問題