HTML+CSS笔记 09：CSS背景

背景

<div class="box1"></div>

.box1 {
  width: 500px;
  height: 500px;
  /* 设置背景颜色 */
  background-color: rosybrown;
  /* 
    设置背景图片
      二者可以同时设置，此时背景颜色将会成为背景图片的背景色
    如果背景图片小于元素，则背景图片会自动在元素中平铺，将元素铺满
    如果背景图片大于元素，将会有一部分背景图片无法显示
  */
  background-image: url('../source/1.jpg');
  /* 
    设置背景的重复方式
      repeat 默认值 背景会沿着 x轴 y轴双方向重复
      repeat-x 沿着 x轴方向重复
      repeat-y 沿着 y轴方向重复
      no-repeat 不重复
  */
  background-repeat: no-repeat;
  /* 
    设置背景图片的位置
      1. 通过 top left right bottom center 几个表示方位的词来设置
          如果只指定一个值，第二个值默认为 center
      2. 通过偏移量来指定背景图片的位置
          水平方向偏移量 垂直方向偏移量
  */
  background-position: top right;
}

.box1 {
  width: 500px;
  height: 500px;
  padding: 50px;
  background-color: rosybrown;
  background-image: url('../source/1.jpg');
  background-repeat: no-repeat;
  border: tomato 10px double;
  /* 
    设置背景的范围
      border-box 默认值，背景会出现的边框的下边
      padding-box 背景不会出现在边框下，只会出现在内边距和内容区下
      content-box 背景只会出现在内容区下
    不影响背景图片
  */
  background-clip: content-box;
  /* 
    背景图片偏移量计算的原点
      padding-box 默认值，background-position 从内边距处开始计算
      content-box background-position 从内容区处开始计算
      border-box background-position 从边框处开始计算
  */
  background-origin: border-box;
}

---

<div class="box1">
    <div class="box2"></div>
</div>

.box1 {
  width: 500px;
  height: 500px;
  overflow: auto;
  background-color: rosybrown;
  background-image: url('../source/1.jpg');
  background-repeat: no-repeat;
  /* 
    设置背景图片的大小
      宽度 高度
        如果只写一个，第二个值默认是auto，此时会等比例缩放
      cover 图片比例不变，将元素铺满
      contain 图片比例不变，将图片在元素中完整显示
  */
  background-size: contain;
}

.box2 {
  width: 300px;
  height: 1000px;
  background-color: tomato;
  background-image: url('../source/lixin.jpg');
  background-repeat: no-repeat;
  /* 
    设置背景图片是否跟随元素移动
      scroll 默认值，跟随元素一起滚动
      fixed 固定在页面中，不会随着元素一起移动（此时位置相对于整个视口设置）
  */
  background-attachment: fixed;
}

简写属性

.box1 {
  width: 500px;
  height: 500px;
  /* 
    没有顺序要求，也没有必须设置的要求
    background-position/background-size
    background-origin 要写在 background-clip 前面
  */
  background: rosybrown url('../source/1.jpg') center center/contain content-box border-box no-repeat;
}

雪碧图

<a href="javascript:;"></a>

a:link {
    display: block;
    width: 350px;
    height: 352px;
    background-image: url('../source/he.jpg');
}
a:hover {
    background-image: url('../source/song.jpg');
}
a:active {
    background-image: url('../source/gu.jpg');
}

图片属于网页中的外部资源，外部资源都需要浏览器单独发送请求加载
浏览器加载外部资源时是按需加载的，即用时才加载
此时由于加载的问题会导致按钮背景发生闪烁
可以使用雪碧图来解决问题

• 可以将多个小图统一保存到一个大图中，然后通过调整 background-position 来显示相对应的小图
• 此时的小图可以同时加载到网页中，避免由于加载造成的闪烁

a:link {
    display: block;
    width: 350px;
    height: 352px;
    background-image: url('../source/xuebi.jpg');
    background-position: 0 0;
}
a:hover {
    background-position: -350px 0;
}
a:active {
    background-position: -700px 0;
}

渐变

线性渐变

.box1 {
  width: 200px;
  height: 200px;
  /* 
    通过渐变可以设置复杂的背景颜色，可以实现从一个颜色到其他颜色的过渡效果
    渐变是图片，需要通过 background-image 来设置
        linear-gradient() 线性渐变：颜色沿着一条直线发生变化
        	linear-gradient(red, yellow) 从上向下变化
            linear-gradient(to right, red, yellow) 可以指定渐变的方向
            	to left
                to right
                to top
                to bottom
                ***deg 表示度数 linear-gradient(45deg, red, yellow)
                ***turn 表示圈 linear-gradient(.25turn, red, yellow)
            多种颜色默认情况下平均分配，也可以手动指定渐变的分布情况
                linear-gradient(red 50px, yellow) 指定颜色开始的位置
        repeating-linear-gradient() 可以平铺的线性渐变
  */
  background-image: repeating-linear-gradient(red 50px, yellow 100px);
}

径向渐变

.box1 {
  width: 300px;
  height: 300px;
  /* 
    radial-gradient() 径向渐变（放射性）
    	默认情况下径向渐变的形状根据元素的形状来计算
        也可以手动指定颜色的位置 
        	radial-gradient(100px 100px, red, yellow)
            radial-gradient(circle, red, yellow) 
            	ellipse / closest-side / closest-corner / farthest-side / farthest-corner
        指定放射开始的原点
            radial-gradient(at 0 0, red, yellow);
  */
  background-image: radial-gradient(farthest-side at 0 0, red, yellow);
}