CSS的背景可以为元素添加背景颜色(background-color)和背景图片(backgroud-image), CSS3也提供了背景使用多张图片和渐变色的功能。
CSS背景属性
- background-color:设置元素的背景颜色。
- background-image:把图像设置为背景。
- background-repeat:设置背景图像是否及如何重复。
- backgroud-position:设置背景图像的起始位置。
- background-size:设置背景图片大小。
- background-attachment:背景图像是否固定或者随着页面的其余部分滚动。
- background:(简写属性)作用是将背景属性设置在一个声明中。
-
background-clip, background-origin,background-break(目前尚未得到广泛支持)
更多可参考MSDN:https://developer.mozilla.org/zh-CN/docs/Web/CSS/Reference
背景颜色
语法:
div{background-color:'red'}
div{background-color:rgb(255,0,0)}
div{background-color:rgba(255,0,0,0.5)}
至于颜色的的可选值可以参看《CSS简介》颜色值一节。
示例:
背景图片
语法:
background-image:url('url');
示例:
background-image:url('https://www.baidu.com/img/flexible/logo/pc/result.png');
从示例中可以看出,默认是水平垂直重复,那么如何控制背景重复呢?
背景重复
语法:
background-repeat:no-repeat;
background-repeat-x:no-repeat;
background-repeat-y:no-repeat;
示例:
背景位置
除此之外,还可以设置背景的起始位置。
语法:
background-position:position;
background-position 属性有5个关键字值,分别是top 、 left 、 bottom 、 right 和 center,这些关键字中的任意两个组合起来都可以作为该属性的值。
背景尺寸
语法:
background-size:50%;
background-size:100px 50px; // 宽100,高50
background-size:cover; // 拉大图片,完全填满,保持宽高比
background-size:contain; // 缩放图片,使其恰好适合背景区,保持宽高比
示例:
背景粘附
background-attachment 属性控制滚动元素内的背景图片是否随元素滚动而移动。这个属性的默认值是scroll ,即背景图片随元素移动。如果把它的值改为 fixed ,那么背景图片不会随元素滚动而移动。
示例:
背景简写
background 简写属性在一个声明中设置所有的背景属性。
可以设置如下属性:
- background-color
- background-position
- background-size
- background-repeat
- background-origin
- background-clip
- background-attachment
- background-image
示例:
background:url('https://www.baidu.com/img/flexible/logo/pc/result.png') no-repeat center ;
多背景图片
语法:
background:
url('') no-repeat 10px 0px...,
url('') no-repeat 10px 60px...,
url('') no-repeat 10px 120px...;
背景渐变
渐变分两种,一种线性渐变,一种放射性渐变。线性渐变从元素的一端延伸到另一
端,放射性渐变则从元素内一点向四周发散。
线性渐变语法:
/* 渐变轴为45度,从蓝色渐变到红色 */
linear-gradient(45deg, blue, red);
/* 从右下到左上、从蓝色渐变到红色 */
linear-gradient(to left top, blue, red);
/* 从下到上,从蓝色开始渐变、到高度40%位置是绿色渐变开始、最后以红色结束 */
linear-gradient(0deg, blue, green 40%, red);
更多可参考:https://developer.mozilla.org/zh-CN/docs/Web/CSS/linear-gradient()
放射性渐变语法:
background: radial-gradient(#e66465, #9198e5);
background: radial-gradient(closest-side, #3f87a6, #ebf8e1, #f69d3c);
background: radial-gradient(circle at 100%, #333, #333 50%, #eee 75%, #333 75%);
background: radial-gradient(ellipse at top, #e66465, transparent),
radial-gradient(ellipse at bottom, #4d9f0c, transparent);
更多可参考:https://developer.mozilla.org/en-US/docs/Web/CSS/radial-gradient()
其他属性
- background-clip 。控制背景绘制区域的范围,比如可以让背景颜色和背景图片只出现在内容区,而不出现在内边距区域。默认情况下,背景绘制区域是扩展到边框外边界的。
- background-origin 。控制背景定位区域的原点,可以设定为元素盒子左上角以外的位置。比如,可以设定以内容区左上角作为原点。
- background-break 。 控制分离元素(比如跨越多行的行内盒子)的显示效果。