背景与渐变
背景
background-color属性
background-color属性表示背景颜色- 背景颜色可以用十六进制、rgb()、rgba()表示法表示
- padding区域是有背景颜色的
background-image属性
background-image属性用来设置背景图片，图片路径要写到url()圆括号中，可以是相对路径，也可以是http://开头的绝对路径。
background-image:url(images/bg1.jpg);
如果样式表是外链的，那么要书写从CSS出发到图片的路径，而不是从html出发
background-repeat属性
background-repeat;设置背景图片是否重复及如何重复，默认平铺满。属性值可以是：
no-repeat（不平铺）repeat-x（横向平铺）repeat-y（纵向平铺）repeat;（x，y均平铺）
background-size属性
background-size属性：设置背景图片的尺寸。兼容到IE9。属性值可以是：
/* 宽、高的具体数值 */
background-size: 500px 500px;
/* 值也可以用百分数来设置，表示盒子宽高的百分比
如果两个属性值相同，可以简写成：background-size: 50%;*/
background-size: 50% 50%;
/* 需要等比例的值，写auto */
background-size: 100% auto;
/* cover：将背景图片智能改变尺寸来撑满盒子，且保证长宽比不变。图片如果有超出部分，则超出部分会被隐藏。 */
background-size: cover;
/* contain：将背景图片智能改变尺寸来完整地显示在盒子中，且保证长宽比不变。可能会导致容器的部分区域为空白。 */
background-size: contain
background-clip属性
background-clip属性用来设置元素的背景裁切到哪个盒子里。兼容到IE9。属性值可以是：
border-box背景延伸至边框（默认值）padding-box背景延伸至padding，不会绘制到border（尽在dotted、dashed边框可察觉）content-box背景被裁剪至内容区
background-attachment 属性
background-attachment属性决定背景图像的位置是在视口内固定，或者随着包含它的区块滚动。属性值可以是：
fixed自己滚动条不动，外部滚动条不动local自己滚动条动，外部滚动条动scroll自己滚动条不动，外部滚动条动（默认值）
background-position属性
background-position属性可以设置背景图片出现在盒子的什么位置
-
用像素值描述属性值
background-position:向右偏移量 向下偏移量; -
用单词描述属性值
background-position: 描述左右的词 描述上下的词; 可以用top、bottom、center、left、right来描述
CSS精灵
CSS精灵：将多个小图标合并制作到一张图片上，使用background-position属性单独显示其中一个，这样的技术叫做CSS精灵技术，也叫CSS雪碧图。
CSS精灵可以减少HTTP请求书，加快网页显示速度。缺点也很明显：不方便测量、后期改动麻烦。
background-origin 属性
background-origin 属性：控制背景从什么地方开始显示。属性值可以是：
/* 从 padding-box 内边距开始显示背景图 默认值*/
background-origin: padding-box;
/* 从 border-box 边框开始显示背景图 */
background-origin: border-box;
/* 从 content-box 内容区域开始显示背景图 */
background-origin: content-box;
background综合属性
background属性是一个综合属性，可以将多个属性写在一起。
background:red url(1.jpg) no-repeat 100px 100px fixed;
同时设置多个背景
我们可以给一个盒子同时设置多个背景，用以逗号隔开即可。可用于自适应局。
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>background-image</title>
<style type="text/css">
div {
width: 300px;
height: 400px;
border: 1px solid #000;
background: url(http://climg.mukewang.com/582c3b780001a95103000090.jpg) no-repeat top center,
url(http://climg.mukewang.com/582c3b6d0001197603000090.jpg) no-repeat center center,
url(http://climg.mukewang.com/582c3b61000122dd03000090.jpg) no-repeat bottom center;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
渐变
线性渐变
盒子的background-image属性可以用linear-gradient()形式创建线性渐变背景。
background-image: linear-gradient(to right, blue, red);
/* 渐变方向 开始颜色 结束颜色 */
渐变方向也可以写成度数
background-image: linear-gradient(45deg, blue, red);
可以有多个颜色值，并且可以用百分数定义它们出现的位置
linear-gradient(to bottom, blue, yellow 20%, red);
div {
background-image: linear-gradient(45deg,
yellow 0%,
yellow 25%,
blue 25%,
blue 50%,
red 50%,
red 75%,
green 75%,
green 100%
);
}
浏览器私有前缀
不同浏览器有不同的私有前缀，用来对试验性质的CSS属性加以标识：
- Chrome: -webkit-
- Firefox: -moz-
- IE、Edge: -ms-
- 欧朋: -o-
径向渐变
盒子的background-image属性可以用radial-gradient()形式创建径向渐变背景
background-image:radial-gradient(50% 50%, red, blue);
/* 圆心坐标 */
共同学习，写下你的评论
评论加载中...
作者其他优质文章
