为什么我的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.