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>