css背景属性
css背景属性的color是在背景图片之下。
-
backgroud
backgroud可以有多个值组成，包括color，image，repeat，size，position，attachment。多个背景图片可以写多个url（用逗号隔开）。postion和size用
/隔开（因为都可以是数字）。但建议分开写相应的属性，直接用background会给改元素未设置的属性有了个计算值。
<style>
div{
width:300px;
height: 300px;
background: blue url('http://t2.hddhhn.com/uploads/tu/201801/9999/12506235f2.jpg') no-repeat center/contain scroll;
}
</style>
<body>
<div></div>
</body>
- background-color
背景色,有多种写法。
-
backgroud-image
url(src),背景图片
-
background-repeat
repeat-x：横向重复。
repeat-y：纵向重复。
no-repeat：默认值。
round：重复，保证图片完整性。
space：重复，保证图片完整性且调整重复图片的间隔。
-
background-size
背景图片大小，单位%，px，还可以为
cover（调整长宽比，使图片填满整个背景），contain（保持长宽比，尽可能填充背景，但不能越界）。 -
backgroud-position
背景位置
可以是具体的位置，但位置的值是负数（以图片上左边界为起始）。也可以是top，left，right，bottom，center。雪碧图的应用。
-
backgroud-attachment
页面背景图片是否固定
scroll：背景图片随着页面滚动而滚动（！！！页面，不是元素）。
fixed：背景图片固定。
<style> div{ width:1300px; height: 1600px; background-color: yellow; background-image:url(http://t2.hddhhn.com/uploads/tu/201801/9999/12506235f2.jpg),url(http://t2.hddhhn.com/uploads/tu/201801/9999/7df8a92034.jpg); background-repeat: no-repeat; background-size: contain; background-position: 10px 10px; background-attachment:fixed; } </style> <body> <div> </div> -
线性渐变
linear-gradient
线性渐变，默认从上到下。
-
放射性渐变
radial-gradient
为了在不同浏览器都能生效，可以在属性前加个前缀。谷歌（webkit），火狐（moz），opera（o），IE（ms）。低版本的ie（ie9及以下好像不起作用）。
<style type="text/css">
.linear{
width: 200px;
height:200px;
background: -webkit-linear-gradient(45deg,red,green);
background: -ms-linear-gradient(45deg,red,green);
background: -o-linear-gradient(45deg,red,green);
background: -moz-linear-gradient(45deg,red,green);
/*针对ie9及以下的浏览器*/
filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr=#810DF7, endColorstr=#ff6600);
}
.radial{
border-radius: 50%;
width: 200px;
height:200px;
background: radial-gradient(red,blue);
}
</style>
</head>
<body>
<div class="linear" ></div>
<div class="radial" ></div>
</body>
