为什么简写和单独写效果截然不同

<!DOCTYPE html>

<html>

<head>

<title>Document</title>

div{

border: 10px solid ;

border-color: rgba(255,0,0,0.5);

padding: 20px;

width: 800px;

height: 550px;

text-align: center;

background-clip: content-box;

background-size: 90%;

background-image: url(http://img1.sycdn.imooc.com/climg//582c39c00001091605000150.jpg) ;

background-repeat: no-repeat;

background-position: bottom;

/*background: content-box 90% url(http://img1.sycdn.imooc.com/climg//582c39c00001091605000150.jpg) no-repeat bottom;*/

}

</style>

</head>

<body>

<div>

<h1>慕课网(IMOOC)国内最大的IT技能学习平台</h1>

</div>

</body>

</html>

精慕门9328699 2019-01-13

源自：CSS3背景与渐变 2-15 编程练习

收起

2回答

好帮手慕星星回答被采纳获得+3积分 2019-01-14 13:39:56

你好，经测试还缺少了一个属性，

这两个要求中的属性分别是：

所以分开写的应该是：

简写的应该是:

自己再测试下。

收起回答

好帮手慕星星 2019-01-14 11:25:01

你好，是简写中顺序的问题，背景图片位置与背景大小需要写在一起，如下：

但是建议参考顺序为：

background: [background-color] [background-image] [background-repeat] [background-attachment] [background-position] / [ background-size] [background-origin] [background-clip];

自己可以修改试一下，祝学习愉快！

收起回答

提问者精慕门9328699 #1

按照顺序写了，还是有差别，简写的时候背景图片偏小 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> div{ border: 10px solid ; border-color: rgba(255,0,0,0.5); padding: 20px; width: 800px; height: 550px; text-align: center; /*background-clip: content-box; background-size: 90%; background-image: url(http://img1.sycdn.imooc.com/climg//582c39c00001091605000150.jpg) ; background-repeat: no-repeat; background-position: bottom;*/ background:url(http://img1.sycdn.imooc.com/climg//582c39c00001091605000150.jpg) no-repeat bottom/90% content-box ; } </style> </head> <body> <div> <h1>慕课网(IMOOC)国内最大的IT技能学习平台</h1> </div> </body> </html>

2019-01-14 11:42:02