HTML和CSS —— 10、背景设置相关

背景

一、background-color 设置背景颜色

二、background-img 设置背景图片

1. 可以同时设置背景图片和背景颜色，这样背景颜色将会成为图片的背景色
2. 如果背景的图片小于元素，则背景图片会自动在元素中平铺将元素铺满
3. 如果背景的图片大于元素，将会一个部分背景无法完全显示
4. 如果背景图片和元素一样大，则会直接正常显示

三、background-repeat 用来设置背景的重复方式

• 可选值：
  1. repeat 默认值，背景会沿着x轴、y轴双方向重复
  2. repeat-x 沿着x轴方向重复
  3. repeat-y 沿着y轴方向重复
  4. no-repeat 背景图片不重复

四、background-position 用来设置图片的位置

• 设置方式

  1. 通过top left right bottom center几个表示方位的词设置背景图片的位置

     ​ 使用方位词时必须要同时指定两个值，如果只写一个

     例：background-position:top left表示在左上角

  2. 通过偏移量来指定背景图片的位置

     ​ 水平方向的偏移量，垂直方向的偏移量

     例：background-position:10px 10px表示距离左10px,上10px

五、设置背景的范围

5.1、background-clip

• 可选值
  1. border-box 默认值，背景会出现在边框的下边
  2. padding-box 背景不会出现在边框，只出现在内容区和内边距
  3. content-box 背景只会出现在内容区

5.2、background-origin

​ 背景图片的偏移量计算的原点，即background-position: 0 0;的位置

• 可选值
  1. padding-box 默认值，background-position从内边距处开始计算
  2. content-box 背景图片的偏移量从内容区处计算
  3. border-box 背景图片的变量从变量处开始计算

六、background-size 设置背景图片的大小

• 设置方式

  1. 第一个值表示宽度

     第二值表示高度

     如果只写一个，则第二个值默认是 auto

  2. cover 图片的比例不变，将元素铺满

     contain 图片比例不变，将图片在元素中完整显示

七、background-attachment 设置背景图片是否跟随元素移动

• 可选值
  1. scroll 默认值，背景图片会跟随元素移动
  2. fixed 背景会固定在页面中，不会随元素移动

八、总结

• 列举背景相关属性

  1. background-color
  2. background-image
  3. background-repeat
  4. background-position
  5. background-size
  6. background-origin
  7. background-clip
  8. background-attachment

• background 简写属性,没有顺序要求，也没有必写属性,但注意

  1. background-size必须写在background-position的后边，并且使用/隔开

     ​ background-position/background-size

  2. background-origin和background-clip两个样式，origin要在clip的前边

九、渐变

• 通过渐变可以设置一些复杂的背景颜色，可以实现从一个颜色向其他颜色过滤的效果

注意：渐变是图片，需要通过background-image属性来设置

1. 线性渐变，颜色沿着一条直线发生变化

   linear-gradient()

   • linear-gradient(red,yellow)表示红色在开头，黄色在结尾，中间是过滤区域

   • 线性渐变的开头我们可以指定一个渐变的方向

     ​ to left

     ​ to right

     ​ to bottom

     ​ to top

     ​ xxxdeg 表示度数

     ​ turn 表示圆

     ​ to left right 表示坐上角

   • 渐变可以同时指定多个颜色，多个颜色默认情况下平均分布，也可以手动指定渐变的分布情况

     linear-gradient(red,yellow,blue,green)

     linear-gradient(red 10px,yellow 20px,blue 30px,green 40px)其中xxpx表示开始有渐变的开始位置

   • repeating-linear-gradient()可以平铺的线性渐变

     linear-gradient(red 50px yellow 100px)如果不能布满就重复显示

2. 径向渐变

   radial-gradient()径向渐变(放射性的效果)

   • 默认情况下径向渐变的形状根据元素的形状来计算的

     ​ 正方向 --> 圆形

     ​ 长方形 --> 椭圆形

   • 我们也可以手动指定径向渐变的大小

     ​ circle

     ​ ellipse

     ​ radial-gradient(ellipse,red,yellow)

   • 也可以指定渐变的位置

     ​ radial-gradient(大小 at 位置 颜色 位置 ,颜色 位置 ,颜色 位置)

     ​ 大小：

     ​ circle 圆形

     ​ ellipse 椭圆

     ​ closest-side 近边

     ​ closest-corner 近角

     ​ farthest-side 远边

     ​ farthest-corner 远角

     ​ 位置：

     ​ top right left center bottom

     例：radial-gradient(100px 100px at 0 0 ,red , #bfa);

     例：radial-gradient(farthest-corner at 0 0 ,red , #bfa);