CSS-background各属性

共用的css 写在最上面

    body {      margin: 0;      box-sizing: border-box;      font-size: 16px;    }    h1,    h2 {      text-align: center;    }    p {      padding: 0;      margin: 0;      color: yellowgreen;      background-color: rgba(0, 0, 0, .3);      display: inline-block;      padding: .3rem;      font-size: 1.2rem;      text-shadow: 0 0 3px rgb(0, 0, 0);      font-weight: 700;    }

先製作一个盒子300x300

製作一个盒子300x300
css

    .box {      width: 300px;      height: 300px;      border: 5px solid #fff;      margin: 50px auto;      box-shadow: 0 0 20px rgba(0, 0, 0, 0.5);      backdrop-filter: blur(10px);    }

html

    <div class="box">      <p>box</p>    </div>

300x300盒子放入300x300的图片

然后增加一个background-img(300x300图片) class
css

    .bg-img-300 {      background-image: url("https://picsum.photos/300/300/?random=1");    }

再将class挂载到html box上

    <div class="box bg-img-300">      <p>background-img-300x300</p>    </div>

此时会出现一个符合盒子的图片

300x300盒子放入100x100的图片

再来我们将图片缩小成100x100放入300x300盒子内
css

    .bg-img-100 {      background-image: url("https://picsum.photos/100/100/?random=1");    }

html

    <div class="box bg-img-100">      <p>background-img-100x100</p>    </div>

此时图片会排满整个盒子3x3

background-repeat

300x300盒子放入100x100的图片(盒子 > 图片）

此时加上background-repeat:no-repeat
css

    .bg-img-100 {      background-image: url("https://picsum.photos/100/100/?random=1");    }    .bg-no-repeat {      background-repeat: no-repeat;    }

html

  <div class="box bg-img-100 bg-no-repeat">    <p>background-img-100x100</p>    <p>no-repeat</p>  </div>

盒子左上角就只会出现一张图片
background-repeat的属性还有repeat-x, repeat-y
repeat-x 横向重複排列
repeat-y 直向重複排列
css

    .bg-repeat-x {      background-repeat: repeat-x;    }    .bg-repeat-y {      background-repeat: repeat-y;    }

300x300盒子放入500x500的图片(盒子 < 图片）

如果盒子放入比自己还要大的图片
css

    .bg-img-500 {      background-image: url("https://picsum.photos/500/500/?random=1");    }

html

    <div class="box bg-img-500">      <p>background-img-500x500</p>    </div>

右下角多出来的地方会被裁切掉且图片会从左上角开始排列
如果想要显示图片中央的话需要添加background-position属性
立马来加看看
css

    .bg-img-500 {      background-image: url("https://picsum.photos/500/500/?random=1");    }     .bg-position {      background-position: center;    }

html

    <div class="box bg-img-500 bg-position">      <p>background-img-500x500</p>      <p>background-position-center</p>    </div>

会发现图片变成中间了，周围的部分被裁切掉
如果盒子比例跟图片一样且图片不想被裁切掉可加入background-size:cover
css

    .bg-img-500 {      background-image: url("https://picsum.photos/500/500/?random=1");    }     .bg-position {      background-position: center;    }     .bg-size-cover {      background-size: cover;    }

html

    <div class="box bg-img-500 bg-position bg-size-cover">      <p>background-img-500x500</p>      <p>background-position-center</p>      <p>background-size-cover</p>    </div>

这样就会等比例缩小把500x500的图片塞进300x300的盒子内

background-position

300x300盒子放入200x200的图片(盒子 > 图片）

backguround-position 为图片在盒子内定位
css

    .bg-img-200 {      background-image: url("https://picsum.photos/200/200/?random=1");    }     .bg-position {      background-position: center;    }

html

    <div class="box bg-img-200 bg-position">      <p>background-img-200x200</p>      <p>background-position-center</p>    </div>

这样图片就会在盒子的正中间
其background-position 属性还有left, right, top, bottom 可以更改图片位置
如background-position:top; 图片就会在盒子上方中央位置
若打background-position:left top; 图片就会在盒子左上方中央位置
另外可以试看看"盒子 < 图片"会发生什么事情

background-size

300x300盒子放入200x100的图片(盒子 > 图片）

先放一个200x100的图片在盒子里
css

    .bg-img-200-100 {      background-image: url("https://picsum.photos/200/100/?random=1");    }

html

    <div class="box bg-img-200-100">      <p>background-img-200x100</p>    </div>

会发现图片在左上角，其他没覆盖到的部分为空白的
此时加入background-size
css

    .bg-img-200-100 {      background-image: url("https://picsum.photos/200/100/?random=1");    }    .bg-size-contain {      background-size: contain;    }    

html

    <div class="box bg-img-200-100 bg-size-contain">      <p>background-img-200x100</p>      <p>background-size-contain</p>    </div>

此时图片会被放大直到宽度碰到盒子的边缘后停止
试看看另外一个属性background-size: cover
css

    .bg-img-200-100 {      background-image: url("https://picsum.photos/200/100/?random=1");    }    .bg-size-cover {      background-size: cover;    }    

html

    <div class="box bg-img-200-100 bg-size-cover">      <p>background-img-200x100</p>      <p>background-size-cover</p>    </div>

此时图片被放得更大，直到填满整个盒子为止，放大时图片起始位置在左上角
如果想把图片显示在正中间要加入background-position:center
css

    .bg-img-200-100 {      background-image: url("https://picsum.photos/200/100/?random=1");    }    .bg-size-cover {      background-size: cover;    }    .bg-position {      background-position: center;    }

html

    <div class="box bg-img-200-100 bg-size-cover">      <p>background-img-200x100</p>      <p>background-size-cover</p>      <p>background-position-center</p>    </div>

感觉顺眼多了

缩写

缩写的值可以随意摆放，但在有个小规则background-position后面要用斜线(/)并紧接着background-size 如下
background-position / background-size
css

    .bg-abbr {      background: url("https://picsum.photos/500/500/?random=1") no-repeat center center/cover;    }

html

    <div class="box bg-abbr">      <p>background-img-abbr</p>    </div>

正常写法
css

    .bg-normal {      background: url("https://picsum.photos/500/500/?random=1");      background-repeat: no-repeat;      background-size: cover;      background-position: center;    }

html

    <div class="box bg-normal">      <p>background-img-normal</p>    </div>

还是缩写的简单

多重背景

最后一个了(终于)
一般多重背景写法
css

    .bg-tree {      background-image:        url("https://picsum.photos/300/100/?random=1"),        url("https://picsum.photos/300/100/?random=2"),        url("https://picsum.photos/300/100/?random=3");      background-repeat: no-repeat, no-repeat, no-repeat;      background-position: left top, left 100px, left bottom;    }

html

    <div class="box bg-tree">      <p>background-img-tree</p>    </div>

这边要注意若第一个图片大于下面的图片则会被覆盖掉

多重背景的缩写
css

    .bg-tree-abbr {      background-image:        url("https://picsum.photos/300/100/?random=1"),        url("https://picsum.photos/300/100/?random=2"),        url("https://picsum.photos/300/100/?random=3");      background-repeat: no-repeat, no-repeat, no-repeat;      background-position: left top, left 100px, left bottom;    }

html

    <div class="box bg-tree-abbr">      <p>background-img-tree-abbr</p>    </div>

终于ending了

附上範例CODEPEN

后续若有想到再补上(CODEPEN 根本文有一丢丢不同，请见谅)