前端第六课--背景样式

背景样式

内容层和背景层

背景层：背景图片是背景颜色的前景图（背景图片在北背景颜色上面）；

背景颜色：background-color：；初始值为transnent

背景图片：background-image：url(路径或链接)；初始值为none

rbga()和opaciy的区别：rbga是设置标签出内容以外的透明度；opacity是将整个标签设置为透明；

给盒子设置边框后背景颜色和背景图片都会延伸到边框下面（其本质是系统自动从图片上截取一部分拼接到border下面）。

常用的背景图片：

.jpg 不支持动画，不支持透明，渐进显示，颜色丰富，有损

.png 不支持动画，支持透明度，颜色丰富，无损

.gif 支持动画，256种颜色，2种透明度，渐进显示

.webp 支持动画，高压缩率，高加载速率

背景层级
背景平铺：

background-repeat:repeat(默认)/no-repeat；

当内容区大于背景图片时，会产生平铺效果。

background-repeat:reapeat-x;在x方向展开平铺。

background-repeat:repeat-y:在y方向展开平铺。

背景图片的大小：

background-size:200px 200px;

​ cover；(图片等比缩放，直到铺满整个背景区域，边框会被背景图片所覆盖)

​ contain；(图片等比缩放，直到有一条边触碰到边框)

​ 200px auto(这时的高根据图片的宽等比例缩放)

​ auto 200px(这里的宽是根据图片的高等比例缩放)

​ 100% 100% 按照内容区的百分比缩放

背景图片的显示基点：

background-origin:规定了在图片不平铺的情况下，背景图片左上角顶点的初始位置

默认为padding-box:背景图片从内边距左上角开始

content-box:背景图片内容区从内边距的左上角开始

border-box:背景图片相当于从边框的左上角开始

背景图片裁剪：

背景图片从开始裁剪background-clip:

content-box:只显示内容区的部分，其余部分被裁剪；

padding-box:显示内边距和内容区的部分，其余部分被裁剪；

border-box:显示内容区，内边距，和边框的部分图片；

背景图片关联依附：(正常情况下背景图片是依附于盒子的，会随着盒子的变化而变化）

背景图片的固定background-attachment:fixed;前提是不平铺。(改样式的作用是决定背景是在视口中固定还是随包含它的区块元素一起滚动)

fixed:此关键词表示背景相当于视口的固定，即使一个元素拥有滚动机制，背景也不会随着元素的的内容滚动。

local:背景图片依附在元素上，随着内容的滚动进行滚动；

scroll：此关键词表示背景相对于元素本身固定，而不是随着内容滚动；（默认情况）

自定义背景图片的定位（分为相对于浏览器的定位和元素的定位）：

background-position: 100px(x轴) 100px（y轴）;(50% 50%居中定位)

背景的复合属性：background:color image repeat attachment position/size;

eg:background:red url() no-repeat fixed 150px 50px/50px 50px;

要按顺序写，省略的部分会被默认值替代。 position和size之间要用/分割。

单个元素设置两个的背景的复合写法：

除了颜色都按上面的顺序写，两个背景之间要加逗号，颜色放置到最后（前面得加一个逗号）

on和size之间要用/分割。

单个元素设置两个的背景的复合写法：

除了颜色都按上面的顺序写，两个背景之间要加逗号，颜色放置到最后（前面得加一个逗号）