背景相关css属性 你还模棱两可吗？ 进来看看 有源码有实例——属性整理

背景相关

使用的原始图片：

常规属性

background-image: url('../assets/bgc.jpg');
background-color:red;

注意：同时有image和color时，图像总是显示在颜色之上。

平铺 background-repeat

属性值：

• repeat-x: 水平平铺，可能截断
• repeat-y: 垂直平铺，可能截断
• repeat: 两个方向平铺，可能截断
• space: 水平或垂直平铺，不会截断，当可能截断时，会调整图片间距，达到不截断图片的目的
• round: 水平或垂直平铺，不会截断，当可能截断时，会拉伸图片，达到不截断图片的目的

起始点background-origin（css3）

  <div class = 'backgrounddemo originpadding'></div><div class = 'backgrounddemo originborder'></div><div class = 'backgrounddemo origincontent'></div><style>
.backgrounddemo{display: inline-block;margin:20px 20px;width:100px;height:100px;padding: 50px;border: 50px solid rgba(4, 7, 20, 0.5);background-image: url('../assets/bgc.jpg');
}
.originpadding{background-origin: padding-box;
}
.originborder{background-origin:border-box;
}
.origincontent{background-origin:content-box;
}</style>

3个可选值，分别是padding-box、border-box和content-box。结果分别如上图，可以发现图片的起始点发生了改变。
padding-box：起始点在padding开始的左上角，也就是和border接轨的左上角的点。
border-box：起始点在border的左上角，也就是黑色边框的左上角。
content-box：起始点在padding与content相交的左上角，
background-origin属性针对的是背景颜色和背景图像的起始位置。

绘制区（裁剪区）background-clip

 <div class = 'backgrounddemo clippadding'></div><div class = 'backgrounddemo clipborder'></div><div class = 'backgrounddemo clipcontent'></div><style>
.backgrounddemo{display: inline-block;margin:20px 20px;width:100px;height:100px;padding: 50px;border: 50px solid rgba(4, 7, 20, 0.5);background-image: url('../assets/bgc.jpg');background-repeat: no-repeat;
}.clippadding{background-clip:padding-box;
}
.clipborder{background-clip: border-box;
}
.clipcontent{background-clip: content-box;
}</style>

background-clip属性针对的是背景颜色和背景图像的绘制区域。三个属性值与上文origin一致，基本类推。值得注意的是，clip属性的border-box值与我们预期的可能不太一样，他不包含左上，但是包含右下

尺寸 background-size（css3）

  <div class = 'backgrounddemo sizeauto'></div><div class = 'backgrounddemo sizecover'></div><div class = 'backgrounddemo sizecontain'></div><div class = 'backgrounddemo sizepx'></div><div class = 'backgrounddemo sizepercent'></div><style>
.backgrounddemo{display: inline-block;margin:20px 20px;width:100px;height:100px;padding: 50px;border: 50px solid rgba(4, 7, 20, 0.5);background-image: url('../assets/bgc.jpg');background-repeat: no-repeat;
}
.sizeauto{background-size: auto;
}
.sizecover{background-size: cover;
}
.sizecontain{background-size: contain;
}
.sizepx{background-size: 100px 100px;
}
.sizepercent{background-size: 80% 80%;
}</style>

background-size五种值分别是：

auto

自动，即背景图不做处理，有多大展示多大能展示完全就展示完全，不能展示完全就不展示完全，不会进行缩放。大了溢出就展示不了，小了填不满就会出现空白。

cover

会按比例进行缩放，但是缩放结果的标准是xy轴有一边完全占满，另一方又不能留空白。意思是在放大或者缩小时，保证div块被填满并且最小尺度的缩放背景图片。不会留白但是可能会有部分溢出。

contain

会按比例进行缩放，但是只会沾满一边，不论是缩小还是放大，只要一边已经占满，不考虑另一边是否沾满或者溢出，不再调整。可能出现空白或者部分溢出。

尺寸

两个像素，设置宽高，将原图完整的压缩或者放大填进去。比例可能改变，图便可能变形。与百分比类似。

百分比

设置宽高的百分比，可能会出现比例变化，变形。一定全部占满所设置的尺寸。百分比的依据是容器大小而不是图片大小哦。

背景图附着background-attachment

<h5>attachment</h5><div class = 'backgrounddemo attachmentscroll'>kjsagfkjsd fkajdgf ajkhdgf ajhsdgf ajhsdgfa djhfgkajhgdfk ahgf ajhsdgfjhdgfjagdfjhagdfjhasgfjhas jahdgfjkahdgfjakjahgdfjhadgf ahjsdgfhjadgfjkahs jkasdgfkjhasgdf jdgfjkhasgfhjsagfdjhasgdfjhagdjfhasgfkjhasdgfjhasdgfjhasgfjhagdjhasgfjhgfkjhsagfhjadsb,sjdhgf jkadgfjkhasgfjkhagfkjas dfjhadgfjhasgf asjhdfgajkshfbjshfghjsagfkjhads</div><div class = 'backgrounddemo attachmentlocal'>kjsagfkjsd fkajdgf ajkhdgf ajhsdgf ajhsdgfa djhfgkajhgdfk ahgf ajhsdgfjhdgfjagdfjhagdfjhasgfjhas jahdgfjkahdgfjakjahgdfjhadgf ahjsdgfhjadgfjkahs jkasdgfkjhasgdf jdgfjkhasgfhjsagfdjhasgdfjhagdjfhasgfkjhasdgfjhasdgfjhasgfjhagdjhasgfjhgfkjhsagfhjadsb,sjdhgf jkadgfjkhasgfjkhagfkjas dfjhadgfjhasgf asjhdfgajkshfbjshfghjsagfkjhads</div><div class = 'backgrounddemo attachmentfixed'>kjsagfkjsd fkajdgf ajkhdgf ajhsdgf ajhsdgfa djhfgkajhgdfk ahgf ajhsdgfjhdgfjagdfjhagdfjhasgfjhas jahdgfjkahdgfjakjahgdfjhadgf ahjsdgfhjadgfjkahs jkasdgfkjhasgdf jdgfjkhasgfhjsagfdjhasgdfjhagdjfhasgfkjhasdgfjhasdgfjhasgfjhagdjhasgfjhgfkjhsagfhjadsb,sjdhgf jkadgfjkhasgfjkhagfkjas dfjhadgfjhasgf asjhdfgajkshfbjshfghjsagfkjhads</div><style>
.backgrounddemo{display: inline-block;margin:20px 20px;width:100px;height:100px;padding: 50px;border: 50px solid rgba(4, 7, 20, 0.5);background-image: url('../assets/bgc.jpg');background-repeat: no-repeat;overflow: auto;
}
.attachmentscroll{background-attachment: scroll;
}
.attachmentfixed{background-attachment: fixed;
}
.attachmentlocal{background-attachment: local;
}</style>

scroll

会跟随元素，就是元素的背景图，元素内部撑开有滚动条不会滚动

local

会跟随元素，就是元素的背景图，元素内部撑开有滚动条会滚动。会随着文字滚动背景图跟着滚动。

fixed

以视口左上角为单位开始绘制，与元素无关，如果该元素刚好落在有背景的区域就展示，没有就不展示。上图如果把该元素的位置移到左上角就会看到背景。如果背景采用平铺的方式，也会看到，元素随页面滚动条滚动到不同的位置，背景图不一样，因为背景图位置不会变，但是元素在背景图上所处的位置变了。自然看到的不一样。这里的fixed与fixed定位有异曲同工之妙3。

背景图定位background-position

方位关键字 top、right、bottom、left和center

这些值通常设置的时候会成对出现，一个对应水平方向，另一个对应垂直方向。关键字最多只能设置两个，并且还有一点比较特殊，就是可以按任何顺序排列。

div{
background-position:top left;
}
//等同于
div{
background-position:left top;
}

长度

长度值会让背景图像从起始点处开始偏移，默认的起始点在上面曾提到过，就是元素背景区的左上角，而偏移点是背景图像的左上角。background-position属性可同时定义两个长度值，第一个为水平方向的偏移，第二个为垂直方向的偏移。如果将元素背景区看做一个特殊的坐标轴，那么它的左上角相当于原点，两个方向相当于X轴（横轴）和Y轴（纵轴）.如果为一个div元素设置两个偏移值：10px和20px，那么背景图像的左上角将在横坐标为10px，纵坐标为20px的坐标点上。

百分数

百分数与长度一样，也可以定义两个值，两个值表示的方向也相同。但百分数是一个相对值，需要参照物，它参照的是背景区的宽高减去原图像的宽高而得到的值。百分数会同时应用于背景区和原图像，如果为一个div元素设置两个偏移值：60%和20%（代码如下所示），那么就会像图4-70那样，需要把两个坐标点对齐，第一个坐标点在原图像中，第二个坐标点在背景区中，两个坐标点的横坐标都为60%，纵坐标都为20%。

简写形式

CSS提供了background的简写属性，它可以设置上面的任何一个属性，在设置多个属性的时候排列也是有讲究的。Html5权威指南官方推荐的顺序是： color - position - size - repeat - origin - clip - attachment - image。position的两个值必须同时出现，并且当background-position的两个值不是关键字的时候，也即是说是像素值或者百分数时，必须水平偏移的值在前，垂直偏移的值在后。

背景透明

CSS3支持背景半透明的写法语法格式是:

background: rgba(0,0,0,0.1);

最后一个参数来设置透明度，是alpha透明度，区间在0~1之间。

仅仅是背景的半透明，盒子内容如字体颜色等不受影响。

如果想让字体等盒子里变得展示内容也透明，需要opacity

下边真的可以不看 -----

想学习一些前端的书籍吗，我都帮你整理好啦！评论打出你想读的书，给你最全的笔记干货

超级全的前端知识，面试必备、系统复习必备哟哟哟

这次真的可以不看 -----

点个收藏呗，要不赞一个呗，小编手都敲累了，但还是持续加更呢～