為什么我的div與背景img不能正確對齊？
[英]Why doesn't my div align properly with background img?
問題描述
新手設計師提出的一個簡短問題...說我有一個<div class="red">跟在<div class="filler"> 。 如果我在第一個div上使用margin-left:10% ，在第二個div上使用背景圖片（高度= 1像素，寬度= 300像素），則垂直重復並left: 10%重復left: 10% ，它們將不會對齊... 為什么不？
HTML：
<!doctype html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>
<div class="test">
</div>
<div class="filler">
</div>
</body>
</html>
CSS：
html, body {
height: 100%;
}
.test{
background-color: red;
width: 300px;
height: 300px;
margin-left: 10%;
}
.filler{
width:100%;
height: 300px;
background: url(../img/test.jpg) top left 10% repeat-y;
}
也許我想念什么，但是呢？ 非常感謝！
1 個解決方案
解決方案1
2 已采納 2014-05-01 13:43:10
對於背景圖像，使用百分比作為位置具有特殊含義。
它不會（如您所期望的那樣）按照給定的百分比對齊圖像的左邊緣，而是將百分比與百分比對齊。
好吧，這在語言上是沒有意義的！
基本上是這樣的：
0%:
[IMAGE ]
50%:
[ IMAGE ]
100%:
[ IMAGE]
這更有意義嗎？ 解決此問題的最佳方法是僅將.filler margin-left:10%到.filler而不是.filler背景。
div Img背景在CSS中不起作用
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.