背景基础相关属性与CSS3新增的背景属性

_花卷
118 阅读3分钟

「这是我参与2022首次更文挑战的14天，活动详情查看：2022首次更文挑战」

一、背景相关属性

1-1、背景相关属性描述：

1-2、img与背景图片的区别

  • img是一个标签，不设置宽高默认会以原尺寸展示
  • 背景图片是装饰的css样式，不能撑开div

二、CSS3新增的背景相关属性

CSS3种新增了3个背景属性：

  • background-size 背景大小
  • background-origin 背景位置
  • background-clip 背景剪切

2-1、background-size

在CSS2.1中，我们不能使用CSS来控制背景图片的大小，背景图片的大小都是由图片实际大小决定的

在CSS3中，我们可以使用background-size属性来定义背景图片的大小，这样可以使得同一张背景图可以在不同的场景重复使用

语法：background-size: 取值;

  • 取值有两种：
    • 一种是长度：px em 或百分比
    • 另一种是关键字：
      • cover（覆盖，表示将背景图等比例缩放来填满整个元素，会导致图片展示不全，可结合background-position属性来改变背景图展示位置）
      • contain（容纳，表示将背景图片等比例缩放至某一边紧贴元素边沿为止，会留有空白，但可巧妙结合background-position属性让背景图片居中展示~）
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>20-背景样式之background-size</title>
  <style>
    div {
      width: 300px;
      height: 100px;
      border: 1px solid red;
      margin-top: 10px;
      background-image: url(img/123.jpeg);
      background-repeat: no-repeat;
      background-color: teal;
    }

    #div2 {
      background-size: 100px 30px;
    }

    /*取值为关键字*/
    #div3 {
      background-size: cover;
    }

    #div4 {
      background-size: contain;
    }

    /* 若有一边固定，可通过设置auto的方式，让另一边等比缩放 */
    #div5 {
      background-size: 80px auto;
    }

    /* 可结合background-position 让背景图居中*/
    #div6 {
      background-size: contain;
      background-position: center;
    }
  </style>

</head>

<body>
  <div id="div1"></div>
  <div id="div2"></div>
  <div id="div3"></div>
  <div id="div4"></div>
  <div id="div5"></div>
  <div id="div6"></div>
</body>

</html>

2-2、background-origin

  1. 语法：background-origin: 取值;
  • 取值有3种：
    • border-box： 从边框开始平铺
    • padding-box： 从内边距开始平铺 （默认值）
    • content-box： 从内容区开始平铺
  1. 注意： background-origin往往配合background-position来使用的
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>21-背景样式之background-origin</title>
<style>
  body{
    font-family: "微软雅黑";
    font-size: 14px;
  }
  #view {
    display: inline-block;
    width: 400px;
    height: 400px;
    padding: 15px;
    margin-top: 15px;
    font-size: 15px;
    border: 15px dashed seagreen;
    background-image: url(img/333.jpg);
    background-origin: border-box;
    background-repeat: no-repeat;
  }
</style>
<script>
window.onload = function() {
  let ckb1 = document.getElementById("ckb1");
  let ckb2 = document.getElementById("ckb2");
  let ckb3 = document.getElementById("ckb3");
  let view = document.getElementById("view");

  ckb1.onchange = function() {
    view.style.backgroundOrigin = "border-box";
  }

  ckb2.onchange = function() {
    view.style.backgroundOrigin = "padding-box";
  }

  ckb3.onchange = function() {
    view.style.backgroundOrigin = "content-box";
  }
}
</script>
</head>
<body>
  <div id="select">
  background-origin:
  <input id="ckb1" name="group" type="radio" value="border-box" checked/>
  <label for="ckb1">border-box</label>
  <input id="ckb2" name="group" type="radio" value="padding-box" />
  <label for="ckb2">padding-box</label>
  <input id="ckb3" name="group" type="radio" value="content-box" />
  <label for="ckb3">content-box</label>
  </div>
  <div id="view">水陆草木之花，可爱者甚蕃。晋陶渊明独爱菊。自李唐来，世人甚爱牡丹。予独爱莲之出淤泥而不染，濯清涟而不妖，中通外直，不蔓不枝，香远益清，亭亭净植，可远观而不可亵玩焉。
  予谓菊，花之隐逸者也；牡丹，花之富贵者也；莲，花之君子者也。噫！菊之爱，陶后鲜有闻。莲之爱，同予者何人？牡丹之爱，宜乎众矣</div>
</body>
</html>

2-3、background-clip

语法：background-clip: 取值;

  • 取值有3种：
    • border-box 从边框开始剪切（默认值）
    • padding-box 从内边距开始剪切
    • content-box 从内容区开始剪切
<!DOCTYPE html>
<html lang="en">

  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>22-背景样式之background-clip</title>
    <style>
      body {
        font-family: "微软雅黑";
        font-size: 14px;
      }

      #view {
        display: inline-block;
        width: 400px;
        height: 400px;
        padding: 15px;
        margin-top: 15px;
        font-size: 15px;
        border: 15px dashed seagreen;
        background-image: url(img/333.jpg);
        background-origin: border-box;
        background-repeat: no-repeat;
      }
    </style>
    <script>
      window.onload = function () {
        let ckb1 = document.getElementById("ckb1");
        let ckb2 = document.getElementById("ckb2");
        let ckb3 = document.getElementById("ckb3");
        let view = document.getElementById("view");

        ckb1.onchange = function () {
          view.style.backgroundClip = "border-box";
        }

        ckb2.onchange = function () {
          view.style.backgroundClip = "padding-box";
        }

        ckb3.onchange = function () {
          view.style.backgroundClip = "content-box";
        }
      }
    </script>
  </head>

  <body>
    <div id="select">
      background-clip:
      <input id="ckb1" name="group" type="radio" value="border-box" checked />
      <label for="ckb1">border-box</label>
      <input id="ckb2" name="group" type="radio" value="padding-box" />
      <label for="ckb2">padding-box</label>
      <input id="ckb3" name="group" type="radio" value="content-box" />
      <label for="ckb3">content-box</label>
    </div>
    <div id="view">水陆草木之花，可爱者甚蕃。晋陶渊明独爱菊。自李唐来，世人甚爱牡丹。予独爱莲之出淤泥而不染，濯清涟而不妖，中通外直，不蔓不枝，香远益清，亭亭净植，可远观而不可亵玩焉。
      予谓菊，花之隐逸者也；牡丹，花之富贵者也；莲，花之君子者也。噫！菊之爱，陶后鲜有闻。莲之爱，同予者何人？牡丹之爱，宜乎众矣</div>
  </body>
</html>

三、精灵图与background-position

精灵图（雪碧图）：即将多个小图标制作在一张图片上，以达到减少HTTP请求数加快网页加载速度的目的。

结合background-position属性可单独展示某一个图标，这种技术为CSS精灵技术。

比如我们想展示出来“金钱”图标：

  • 首先测量出该图标的宽度和高度
  • 再测量出此图标在整张精灵图中的坐标：比如（x: 66px y: 488px）
  • 默认情况下，背景图的左上角与盒子的左上角重合，也就是说我们若想展示出金钱图标，那么就需要让背景图位置向左移动66px，向上移动488px：

代码示例：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
      .money {
        width: 34px;
        height: 32px;
        border: 1px solid #000;
        background-image: url(images/sprites.png);
        background-position: -66px -488px;
      }
    </style>
  </head>
  <body>
    <div class="money"></div>
  </body>
</html>

四、background综合属性

语法：background: 背景颜色 背景图片 背景重复 背景位置;

如：background: white url(images/1.jpg) no-repeat center center;

avatar
文章
阅读
粉丝