为什么我的div与背景img不能正确对齐？
[英]Why doesn't my div align properly with background img?
问题描述
A short question from a newbie designer... Say I have a <div class="red"> folowed by a <div class="filler"> . 
新手设计师提出的一个简短问题...说我有一个<div class="red">跟在<div class="filler"> 。 If I use margin-left:10% on the first div and I use a background image on the second div (height=1px and width=300px) and I repeat it vertically and start it left: 10% , they won't align... Why not? 如果我在第一个div上使用margin-left:10% ，在第二个div上使用背景图片（高度= 1像素，宽度= 300像素），则垂直重复并left: 10%重复left: 10% ，它们将不会对齐... 为什么不？
HTML: 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: 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;
}
Maybe I'm missing something, but what? 也许我想念什么，但是呢？ Thanks a lot! 非常感谢！
1 个解决方案
解决方案1
2 已采纳 2014-05-01 13:43:10
In the case of background images, using a percentage as a position has a special meaning. 对于背景图像，使用百分比作为位置具有特殊含义。
It does not (as you might expect) align the left edge of the image at the percentage you give, but rather it aligns the percentage with the percentage. 它不会（如您所期望的那样）按照给定的百分比对齐图像的左边缘，而是将百分比与百分比对齐。
Okay, that makes no sense in words! 好吧，这在语言上是没有意义的！
Basically, it's like this: 基本上是这样的：
0%:
[IMAGE ]
50%:
[ IMAGE ]
100%:
[ IMAGE]
Does that make more sense? 这更有意义吗？ The best way to fix this is to just add the margin-left:10% to the .filler instead of positioning the background. 解决此问题的最佳方法是仅将.filler margin-left:10%到.filler而不是.filler背景。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.