【学习笔记-CSS】background 各属性

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了
/images/emoticon/emoticon34.gif
附上范例CODEPEN

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


<<:  Day18 PHP的常用函数3:时间函数

>>:  Day18 Combine 05 - Operators 类型介绍 : 转换操作符

Day14 - 解决状态大爆炸 - 2: Hierarchical States (阶层式状态)

同样的例子。 假设这次我希望某些状态是依赖於某些状态的！ 比如说有输入有效(valid)跟输入无效(...

零信任的特徵

零信任 零信任是一种用於访问控制的网络安全范例，具有以数据为中心，细粒度，动态且具有可见性的特徵。 ...

android studio 30天学习笔记-day 17-TabLayout+TabItem

TabLayout提供了一个水平的布局方式显示，TabItem是TabLayout显示的物件。 de...

DAY18：激活函数

激活函数 每个神经元都有一个激活函数，由这层神经元输出给下层神经元的输入，中间就会有个函数关系，将之...

前端工程师也能开发全端网页：挑战 30 天用 React 加上 Firebase 打造社群网站｜Day3 建立 React 网页

连续 30 天不中断每天上传一支教学影片，教你如何用 React 加上 Firebase 打造社群...