background

此属性是一个简写属性，可以在一次声明中定义一个或多个属性。

css

background: color image position / size repeat attachment clip, ...;

background-clip

默认情况下，背景会延伸到边框所在的区域下层，可以通过 background-clip 属性来调整。

css

background-clip: border-box | padding-box | content-box;

vue

<template>
  <div class="h-300 bg">
    <div class="h-300 clip"></div>
  </div>
</template>

<style lang="scss" scoped>
.bg {
  background-color: white;
  background-image: linear-gradient(90deg, rgba(200, 0, 0, 0.5) 50%, transparent 0), inear-gradient(rgba(
          200,
          0,
          0,
          0.5
        ) 50%, transparent 0);
  background-size: 30px 30px;
}
.clip {
  border: 30px solid hsla(0, 0%, 100%, 0.5);
  background: white;
  background-clip: padding-box;
}
</style>

background-image

如果我们把第二个色标的位置值设置为 0，那它的位置就总是会被浏览器调整为前一个色标的位置值。

vue

<template>
  <div class="h-100 linear"></div>
</template>

<style lang="scss" scoped>
.linear {
  background: linear-gradient(#fb3 30%, #58a 30%);
}
</style>

vue

<template>
  <div class="h-100 linear"></div>
</template>

<style lang="scss" scoped>
.linear {
  background: linear-gradient(#fb3 30%, #58a 0);
}
</style>

网格背景

当我们把多个渐变图案组合起来，让它们透过彼此的透明区域显现。

vue

<template>
  <div class="h-300 bg"></div>
</template>

<script lang="ts" setup></script>

<style lang="scss" scoped>
.bg {
  background-color: white;
  background-image: linear-gradient(90deg, rgba(200, 0, 0, 0.5) 50%, transparent 0), linear-gradient(rgba(
          200,
          0,
          0,
          0.5
        ) 50%, transparent 0);
  background-size: 30px 30px;
}
</style>

两幅不同线宽、不同颜色的网格图案叠加起来。

vue

<template>
  <div class="h-300 bg"></div>
</template>

<style lang="scss" scoped>
.bg {
  background-color: #58a;
  background-image: linear-gradient(white 2px, transparent 0), linear-gradient(90deg, white 2px, transparent 0),
    linear-gradient(hsla(0, 0%, 100%, 0.3) 1px, transparent 0), linear-gradient(90deg, hsla(0, 0%, 100%, 0.3) 1px, transparent
        0);
  background-size: 75px 75px, 75px 75px, 15px 15px, 15px 15px;
}
</style>

斜向背景

vue

<template>
  <div class="h-300 bg"></div>
</template>

<style lang="scss" scoped>
.bg {
  background: linear-gradient(45deg, #fb3 25%, #58a 0, #58a 50%, #fb3 0, #fb3 75%, #58a 0);
  background-size: 30px 30px;
}
</style>

斜向背景加强版

可以随意设置角度。

vue

<template>
  <div class="h-300 bg"></div>
</template>

<style lang="scss" scoped>
.bg {
  background: repeating-linear-gradient(45deg, #fb3, #fb3 15px, #58a 0, #58a 30px);
}
</style>

灵活的同色系条纹

把最深的颜色指定为背景色，同时把半透明白色的条纹叠加在背景色之上来得到浅色条纹。

vue

<template>
  <div class="h-300 approximate"></div>
</template>

<style lang="scss" scoped>
.approximate {
  background: #58a;
  background-image: repeating-linear-gradient(
    45deg,
    hsla(0, 0%, 100%, 0.2),
    hsla(0, 0%, 100%, 0.2) 15px,
    transparent 0,
    transparent 30px
  );
}
</style>

波点

vue

<template>
  <div class="h-300 point"></div>
</template>

<style lang="scss" scoped>
.point {
  background: #655;
  background-image: radial-gradient(tan 30%, transparent 0);
  background-size: 30px 30px;
}
</style>

vue

<template>
  <div class="h-300 point-2"></div>
</template>

<style lang="scss" scoped>
.point-2 {
  background: #655;
  background-image: radial-gradient(tan 30%, transparent 0), radial-gradient(tan 30%, transparent 0);
  background-size: 30px 30px;
  background-position: 0 0, 15px 15px;
}
</style>

棋盘

vue

<template>
  <div class="h-300 checkerboard-1"></div>
</template>

<style lang="scss" scoped>
.checkerboard-1 {
  background: #eee;
  background-image: linear-gradient(45deg, #bbb 25%, transparent 0), linear-gradient(45deg, transparent 75%, #bbb 0),
    linear-gradient(45deg, #bbb 25%, transparent 0), linear-gradient(45deg, transparent 75%, #bbb 0);
  background-position: 0 0, 15px 15px, 15px 15px, 30px 30px;
  background-size: 30px 30px;
}
</style>

vue

<template>
  <div class="h-300 checkerboard-2"></div>
</template>

<style lang="scss" scoped>
.checkerboard-2 {
  background: #eee;
  background-image: linear-gradient(
      45deg,
      rgba(0, 0, 0, 0.25) 25%,
      transparent 0,
      transparent 75%,
      rgba(0, 0, 0, 0.25) 0
    ), linear-gradient(45deg, rgba(0, 0, 0, 0.25) 25%, transparent 0, transparent 75%, rgba(0, 0, 0, 0.25) 0);
  background-position: 0 0, 15px 15px;
  background-size: 30px 30px;
}
</style>

vue

<template>
  <div class="h-300 checkerboard-3"></div>
</template>

<style lang="scss" scoped>
.checkerboard-3 {
  background: repeating-conic-gradient(#bbb 0, #bbb 25%, #eee 0, #eee 50%);
  background-size: 30px 30px;
}
</style>

平行四边形

包裹元素

vue

<template>
  <div class="parallelogram-1">
    <div class="">包裹元素</div>
  </div>
</template>

<style lang="scss" scoped>
.parallelogram-1 {
  background-color: #465c73;
  transform: skewX(-45deg);
}
.parallelogram-1 > div {
  transform: skewX(45deg);
  color: #fff;
}
</style>

菱形图片

vue

<template>
  <div class="diamond"></div>
</template>

<style lang="scss" scoped>
.diamond {
  height: 100px;
  width: 100px;
  background-image: url(https://upload-bbs.miyoushe.com/upload/2022/12/03/75276545/0a18f6cbe4a0cb62a38266663468543f_3827061868677076228.jpg?x-oss-process=image/auto-orient,0/interlace,1/format,jpg);
  background-size: cover;
  clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
  transition: 0.3s clip-path;
}

.diamond:hover {
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
}
</style>

梯形

点击

vue

<template>
  <div class="nav"><a>点击</a></div>
</template>

<style lang="scss" scoped>
.nav > a {
  position: relative;
  display: inline-block;
  padding: 0.3em 1em 0;
  z-index: 0;
}

.nav > a::before {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: -1;
  background: #ccc;
  transform: perspective(0.5em) rotateX(5deg);
  transform-origin: bottom;
}
</style>

斑马线

我认为, 就我个人来说, 随机一段废话对我的意义, 不能不说非常重大. 从这个角度来看, 要想清楚, 随机一段废话, 到底是一种怎么样的存在. 随机一段废话的发生, 到底需要如何做到, 不随机一段废话的发生, 又会如何产生. 那么, 本人也是经过了深思熟虑,在每个日日夜夜思考这个问题. 要想清楚, 随机一段废话, 到底是一种怎么样的存在. 我认为, 对我个人而言，随机一段废话不仅仅是一个重大的

vue

<template>
  <div class="stripe">
    我认为, 就我个人来说, 随机一段废话对我的意义, 不能不说非常重大. 从这个角度来看, 要想清楚, 随机一段废话,
    到底是一种怎么样的存在. 随机一段废话的发生, 到底需要如何做到, 不随机一段废话的发生, 又会如何产生. 那么,
    本人也是经过了深思熟虑,在每个日日夜夜思考这个问题. 要想清楚, 随机一段废话, 到底是一种怎么样的存在. 我认为,
    对我个人而言，随机一段废话不仅仅是一个重大的
  </div>
</template>

<style lang="scss" scoped>
.stripe {
  padding: 0.5em;
  line-height: 1.5;
  background: beige;
  background-size: auto 3em;
  background-origin: content-box;
  background-image: linear-gradient(rgba(0, 0, 0, 0.2) 50%, transparent 0);
}
</style>

顶部线

Ada Catlace
Alan Purring
Schrödingcat
Tim Purrners-Lee
WebKitty
Json
Void
Neko
NaN
Cat5
Vector

vue

<template>
  <ul class="xxx h-200" style="overflow: auto">
    <li>Ada Catlace</li>
    <li>Alan Purring</li>
    <li>Schrödingcat</li>
    <li>Tim Purrners-Lee</li>
    <li>WebKitty</li>
    <li>Json</li>
    <li>Void</li>
    <li>Neko</li>
    <li>NaN</li>
    <li>Cat5</li>
    <li>Vector</li>
  </ul>
</template>

<style lang="scss" scoped>
.xxx {
  background: linear-gradient(white 30%, transparent), radial-gradient(at 50% 0, rgba(0, 0, 0, 0.2), transparent 70%);
  background-repeat: no-repeat;
  background-size: 100% 50px, 100% 15px;
  background-attachment: local, scroll;
}
</style>

background ​

background-clip ​

background-image ​

网格背景 ​

斜向背景 ​

斜向背景 加强版 ​

灵活的同色系条纹 ​

波点 ​

棋盘 ​

平行四边形 ​

菱形图片 ​

梯形 ​

斑马线 ​

顶部线 ​