div 容器背景圖像
[英]div container background-image
問題描述
我創建了一個 div 容器。 這個容器應該得到一個背景圖像。 圖像為 1200 x 64 像素。 如果我在 div 容器中寫一些東西，應該完全顯示 1 張圖片。 如果我寫的文字高度超過 70 像素，則應完全顯示 2 張圖片。 目前，我必須給容器一個固定的高度
*{ margin: 0px; padding: 0px; } .div_mit_background { margin-right: auto; margin-left: auto; width: 1200px; background-image: url('http://img3.fotos-hochladen.net/uploads/background7j0b6tzhl1.png'); height: 200px; } p{ margin-left: 64px; color: white; padding-top: 20px; }
<html> <head> <link href='index.css' rel='stylesheet' type='text/css'> </head> <body> <div class="div_mit_background"> <p> Here is some content. </p> </div> </body> </html>
1 個解決方案
解決方案1
2 2015-01-20 19:46:07
如果您要做的就是在換行時顯示完整的背景圖像，那么一種可能的解決方案是執行以下操作：
- 從p標簽的CSS刪除
padding-top - 將此添加到p標簽的CSS：
line-height:64px;這樣線條的高度將與背景圖像的高度相同，並且將顯示一個圖像或顯示兩個圖像（而不是一個半等等）。
這是p標簽的更新CSS。
p{
margin-left: 64px;
color: white;
line-height:64px;
}
對於左側或右側填充或邊距，您可以根據需要設置它們。
並且不要忘記將.div_mit_background的高度設置為height:auto; .div_mit_background 而不是200px。
希望能幫助到你。
解決方案2
0 2022-01-22 05:09:20
我同意它可能不是最好的解決方案，但迄今為止我發現的唯一一個沒有使用 JS 的解決方案。 @Sketpar：如果您可以確認這是否適合您，那么我可以同時尋找其他解決方案。 sockstee.com
具有背景圖像的div被具有背景圖像的另一個div覆蓋
[英]Div with background-image overlayed by another div with background-image
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.