这段代码为什么在不同浏览器显示不一样 有些背景图片纵向重复？
来源：2-7 background-repeat
Alvin24
2019-01-18 15:55:39
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>背景</title>
<style type="text/css">
div{ background-image: url(http://climg.mukewang.com/58dc9d360001d65806500650.jpg); width: 650px; height: 650px; padding-top: 250px;}
p{text-align: center;}
</style>
</head>
<body>
<div>
<p>
《长歌行》
<br>
<br>青青园中葵，朝露待日晞。
<br>阳春布德泽，万物生光辉。
<br>常恐秋节至，焜黄华叶衰。
<br>百川东到海，何时复西归。
<br>少壮不努力，老大徒伤悲。
<br>
</p>
</div>
</body>
</html>
1回答
-
好帮手慕夭夭
2019-01-18
你好同学 ,这个是浏览器默认样式导致的 , 有一些浏览器可能默认的box-sizing:border-box; , 会让padding和border计算在你设置的盒子width里面 ,所以盒子事件高度还是650px .
有一些浏览器默认box-sizing:content-box ,这样盒子的实际高度是padding+width=950px .
(box-sizing会在进阶中讲解的) , 所以当背景图的高度不够铺满盒子的高度 ,背景图就会重复平铺 . 背景图片可以设置如下属性:
因为padding-top影响了盒子实际高度 ,所以可以把width设置小一些
祝学习愉快 ,望采纳 .
0
相似问题