CSS背景属性知多少？

小东同学

发布于 2022-07-29 12:16:21

1K0

发布于 2022-07-29 12:16:21

文章被收录于专栏：前端进阶实战

作为一名前端工程师，相信大部分同学对于CSS都能够熟练地运用于项目工程中，但是如果对于CSS各个知识点并不算非常深入，就会在开发调试中有相当一部分时间放花到了UI调整上，想要提升UI到代码实现的效率，就得深入全面地认识CSS各个属性，background作为背景属性，希望大家通过阅读本文也能够完全掌握。

本文想通过简单的属性介绍和代码实践，给大家一个更加直观的CSS规则和表现的认识，同时领略CSS神奇的表现能力，以提升我们在UI开发过程中的效率。

一、背景描述相关常见属性

background（背景）属性，是关于背景颜色、位置、图片等属性描述的集合，是一种简写，与其分析简写形式，不如逐个分析有关背景描述的属性。

接下来将从常用的顺序依次分析、实践，以便于记忆以及更深体会，笔者也建议大家在coding时候将简写属性拆开来写，避免自己混淆，也能让阅读之人更加清晰。

1.1 background-color（背景颜色）

background-color是描述所有HTML元素的背景颜色的属性，其值为“色值”，例如：rgba(0,0,0,.5)、rgb(255,255,200)、#000、red等。

示例代码：

<div class="box box1">
    background-color
</div>

.box {
  width: 250px;
  height: 250px;
  margin: 10px;
  box-sizing: border-box;
  display: flex;
  justify-content: center;
  align-items: center;
  border: 1px solid #fff;
}
.box1 {
  color: #fff;
  background-color: red;
}

效果：

background-color

项目开发推荐使用十六进制、RGBA和颜色单词形式，这三种形式非常好理解，也能完全满足绝大部分的工程场景，且兼容性不错。

1.2 background-image（背景图片）

background-image属性的值形式为：url('https://blog.dyboy.cn/logo.png')、url(图片文件base64编码字符串)，其作用是给元素设置背景图。

示例代码：

<div class="box box2">
    background-image
</div>

.box2 {
  color: black;
  background-image: url('https://blog.dyboy.cn/content/uploadfile/201806/c59d1528813272.gif');
}

效果：

预览效果

上面的简单设置背景图似乎并不够完美，因此针对背景图的相关CSS规则也更加丰富。

1.3 background-repeat（背景图重复）

background-repeat属性实际上也是一个简写，其规则为：若只有一值，则为设置X和Y轴（水平和垂直）方向上背景图宽高大小不足的时候，是否复制该图片。

示例代码：

<div class="box box3">
    background-repeat: no-repeat
</div>

<div class="box box4">
    background-repeat-x: no-repeat 
</div>

<div class="box box5">
    background-repeat-y: no-repeat
</div>

.box3 {
  color: #fff;
  background-image: url('https://blog.dyboy.cn/content/uploadfile/201806/c59d1528813272.gif');
  background-repeat: no-repeat;
}

.box4 {
  color: #fff;
  background-image: url('https://blog.dyboy.cn/content/uploadfile/201806/c59d1528813272.gif');
  background-repeat-x: no-repeat;
}

.box5 {
  color: #fff;
  background-image: url('https://blog.dyboy.cn/content/uploadfile/201806/c59d1528813272.gif');
  background-repeat-y: no-repeat;
}

效果：

预览效果

1.4 background-size（背景图尺寸）

background-size属性用于调整（拉伸）背景图的大小。

需要调整背景图片的尺寸，一般来讲图片的尺寸并非百分百就符合元素所在矩形框大小，此时如果想要在盒模型容器中全部展示图片或展示部分，就需要用到该属性去调整（拉伸）背景图的尺寸

示例代码：

<div class="box box6">
    background-size: cover
</div>

<div class="box box7">
    background-size: 50% 50%
</div>

<div class="box box8">
    background-size: contain
</div>

<div class="box box9">
    background-size: 100px 150px
</div>

.box6 {
  color: #fff;
  background-image: url('https://blog.dyboy.cn/content/uploadfile/201806/c59d1528813272.gif');
  background-repeat: no-repeat;
  background-size: cover;
}

.box7 {
  color: #fff;
  background-image: url('https://blog.dyboy.cn/content/uploadfile/201806/c59d1528813272.gif');
  background-repeat: no-repeat;
  background-size: 50% 50%;
}

.box8 {
  color: #fff;
  background-image: url('https://blog.dyboy.cn/content/uploadfile/201806/c59d1528813272.gif');
  background-repeat: no-repeat;
  background-size: contain; // 以图形的长边为最大调整值，长边充满元素所在矩形
}

.box9 {
  color: #fff;
  background-image: url('https://blog.dyboy.cn/content/uploadfile/201806/c59d1528813272.gif');
  background-repeat: no-repeat;
  /* 设置背景图尺寸width 100px height 150px */
  background-size: 100px 150px;
}

效果：

预览效果

1.5 background-position(背景图位置)

background-position属性用于设置背景图在元素盒模型当中的展示位置，相当于设置背景图的起始坐标参考点（默认的起始参考点为元素所在矩形框中的左上顶点）。

如果设置值为：fixed，则背景图会相对于当前元素若是滚动区域的左上角定位

示例代码：

  <div class="box box-image bg-pos-center">
    background-position: center
  </div>
  <div class="box box-image bg-pos-top">
    background-position: top
  </div>
  <div class="box box-image bg-pos-bottom">
    background-position: bottom
  </div>
  <div class="box box-image bg-pos-right">
    background-position: right
  </div>
  <div class="box box-image bg-pos-left">
    background-position: left
  </div>
  <div class="box box-image bg-pos-percent">
    background-position: 20% 30%
  </div>
  <div class="box box-image bg-pos-percent-bottom-right">
    background-position: bottom 20% left 10%
  </div>

.box-image {
  color: #fff;
  background-image: url('https://blog.dyboy.cn/content/uploadfile/201806/c59d1528813272.gif');
  background-repeat: no-repeat;
}
.bg-pos-center {
  background-position: center;
}
.bg-pos-top {
  background-position: top;
}
.bg-pos-bottom {
  background-position: bottom;
}
.bg-pos-left {
  background-position: left;
}
.bg-pos-right {
  background-position: right;
}
.bg-pos-percent {
  /* default left: 20% top 30%  */
  background-position: 20% 30%;
}
.bg-pos-percent-bottom-right {
  background-position: bottom 20% left 10%;
}

效果：

预览效果

1.6 background-attachment（背景粘滞）

background-attachment :定义背景图片随滚动轴的移动方式，有两种典型取值: scroll 和 fixed

scroll: 默认值，随着页面的滚动轴背景图片将移动
fixed: 随着页面的滚动轴背景图片不会移动

示例代码：

<h2>背景图移动方式</h2>
<div class="bg-move bg-scroll"></div>
<div class="bg-move bg-fixed"></div>

.bg-move {
  width: 100%;
  height: 500px;
  border: 1px solid;
  margin: 100px auto;
}
.bg-scroll {
  background: url(http://browser9.qhimg.com/bdr/__85/t01a7117bbc9683a7eb.jpg) no-repeat scroll;
}
.bg-fixed {
  background: url(http://browser9.qhimg.com/bdr/__85/t01a7117bbc9683a7eb.jpg) no-repeat fixed;
}

效果：

fixed

1.8 background-clip（背景范围裁剪）

background-clip属性用于描述裁剪背景的绘制区域，其值有：

content-box：背景区域为内容区
border-box：背景区域为border+padding+content区域
padding-box：背景区域为padding+content区域

示例代码：

<h2>背景区域裁剪</h2>
<div class="container">
  <div class="box bg-red bg-clip-border">
    background-clip: border-box
  </div>
  <div class="box bg-red bg-clip-content">
    background-clip: content-box
  </div>
  <div class="box bg-red bg-clip-padding">
    background-clip: padding-box
  </div>
</div>

.bg-red {
  border: 20px dotted #fff;
  padding: 20px;
  margin: 20px;
  background-color: red;
}
.bg-clip-padding{
  background-clip: padding-box;
}
.bg-clip-border{
  background-clip: border-box;
}
.bg-clip-content{
  background-clip: content-box;
}

效果：

预览效果

👀看起来有点奇妙，似乎我们可以通过这个属性组合一下就能做出点什么特别的事情？？？

另外还可以通过-webkit-background-clip: text;，设置展示范围为文字内容所占线条，相当于给文字上色，或者加背景图模拟窗户穿透效果，不妨尝试下？

文字渐变色

1.9 渐变色

除了设置普通的纯色和背景图，还可以给背景设置渐变颜色，渐变颜色依赖于几何变换函数

1.9.1 线性渐变

线性渐变的函数是linear-gradient(起点和终点角度，起点颜色，终点颜色)，起点和终点的角度值可以参考下面的图：

起终点角度计算

第一个参数角度的计算以时钟⏰12点方向为0度（deg），顺时针方向旋转角度。

颜色值的个数是不限定的（是一个列表），默认每个颜色在第一个参数所设定的线性方向上渐变等分。另外可以在颜色值其后指定与前一个颜色渐变的中心位置的百分比，例如：background: linear-gradient(45deg, red, orange 20%, #006eff 80%)，即红色和橘色在始末点连线上的距离起点20%处均匀渐变，在80%处为橘色和蓝色均匀渐变的中心位置，同样的，既然百分比可用其他的单位例如px也是可以使用，只是需要注意计算的基数。

可以简单看几个例子：

<h2>渐变色</h2>

<div class="container">
  <div class="box box-linear">
    background-image: linear-gradient(45deg, red, orange)
  </div>
  
  <div class="box box-linear-to-bottom">
    background-image: linear-gradient(to bottom, red, orange)
  </div>
  
  <div class="box box-linear-to-bottom-right">
    background-image: linear-gradient(to bottom right, red, orange)
  </div>
  <div class="box rainbow">
     彩虹🌈
  </div>
</div>

.box-linear {
  background-image: linear-gradient(45deg, red, orange);
}

.box-linear-to-bottom {
  background-image: linear-gradient(to bottom, red, orange);
}

.box-linear-to-bottom-right {
  background-image: linear-gradient(to bottom right, red 25%, orange 60%, yellow 80%);
}
.rainbow{
  background-image: linear-gradient(to bottom, red, orange, yellow, green, cyan, blue, purple)
}

效果：

预览效果

1.9.2 径向渐变

径向渐变，顾名思义即是基于圆形/椭圆有半径这类集合图形的几何渐变算法，因此就有了radial-gradient()函数专用于径向渐变背景色的设置。

其语法如下：

radial-gradient() = radial-gradient(
  [ <ending-shape> || <size> ]? [ at <position> ]? ,
  <color-stop-list>
)

相较于线性渐变稍微复杂了些。

第一个可选参数ending-shape或size：
- farthest-side：默认值，渐变中心圆形的半径是所在矩形长边的一半，椭圆则是长短半轴则是长宽的一半
- closest-side：渐变中心圆形的半径是所在矩形短边的一半，椭圆则是长短半轴则是长宽的一半
- farthest-corner & closest-corner：对应渐变结束形状的半径是所在矩形对角线长度的一半，其余部分自动调整
- ending-shape参数：径向渐变的几何图形算法支持设置以圆（circle，默认值）或者椭圆（ellipse）的渐变，如果设置一个值则认为是圆，两个值则是椭圆的长短半轴
- size参数：或者（同时）设置渐变结束时候形状大小，一个长度单位的值就是正方形，两个值则是矩形，size还有几个关键词可用：
第二个参数[at <position>]：设置渐变的中心位置，默认值为center
第三个参数<color-stop-list>：自然就是类似于线性渐变时候设置的颜色列表，颜色其后可以设置两色渐变中心位置的长度单位/百分比

看如下几个示例便可知晓，在工程中常用的不过如此，有深入的需要再翻阅渐变文档：

  <div class="box box-radial-circle">
    圆形渐变
  </div>
  
  <div class="box box-long box-radial-ellipse">
    椭圆渐变
  </div>
  <div class="box box-radial-circle-pos">
    圆形渐变中心偏移
  </div>
  <div class="box box-radial-circle-repeat">
    圆形渐变重复
  </div>

.box-long {
  height: 150px;
  width: 300px;
}
.box-radial-circle {
  background: radial-gradient(circle, white, black);
}
.box-radial-ellipse {
  background: radial-gradient(ellipse, white, black);
}
.box-radial-circle-pos{
  background: radial-gradient(circle at 0 0, white, black);
}
/*同理可设置线性渐变*/
.box-radial-circle-repeat{
  background: repeating-radial-gradient(circle, white 10px, black 20px);
}

效果：

预览效果

到这里就算是将background大部分在工程上常用方法讲完了，另外如果还需要更加精细化控制可以参考官方文档。

上述代码与效果均可在：https://codepen.io/DYBOY/pen/eYBwKOp 此处查看。

二、用背景渐变色制作好看的桌面壁纸

通过对background属性的了解与熟悉，可以基于该属性做出一些有趣的视觉效果。截个图就可以拿来做自己的桌面壁纸。

2.1 线性变换背景

首先设置一个线性90deg水平向右渐变的彩虹色，效果如图

预览效果

然后加上帧动画，并且将background-size变大

<div class="linear-bg"></div>

*{
  padding: 0;
  margin: 0;
}
.linear-bg{
  width: 100%;
  height: 100vh;
  animation: linear-bg-transform 8s linear infinite;
  background-image: linear-gradient(90deg, #f13535, #f37a2a, #f0c63f, #81ec43, #29dce9, #15a1e2, #bd10e9, #f13535);
  /*八种颜色都有100%趋近占满全屏的时候*/
  background-size: 800% 100%;
}

@keyframes linear-bg-transform {
  0% {
    background-position: 0%;
  }
  100% {
    background-position: 100%;
  }
}

效果：

线性渐变.gif

Gif预览效果不佳，可移步：https://codepen.io/DYBOY/pen/poNMxbX

2.2 不规则几何变换背景（Magical Wallpaper）

上面是借助线性渐变，那么我们再增加径向渐变，不同角度，不同变换的中心点，不同size，那么就可以实现一个不规则几何渐变背景，随便截个图都是一张抽象派壁纸

效果如图：

预览效果

这里就不贴代码了，代码略长

代码&动态演示：https://codepen.io/DYBOY/pen/mdONGQw

2.3 搞点呼吸效果的水波纹动画

依赖径向渐变，还可以搞点呼吸水波纹动画，效果还是很优美的！快拿去抄作业吧👀

water-waves.gif

代码&演示：https://codepen.io/DYBOY/pen/YzpmMKz

三、background-position制作逐帧动画

在某些场景下我们可能会使用Gif图来实现一些简单的动画，Gif的缺点就是文件大，增加了网络请求，对于透明度支持不好，Gif还会周期性导致浏览器重绘。

因此简单的动画还可以利用background-position属性+雪碧图做位置偏移来实现，和上面讲到的线性渐变背景色类似。

基于background的逐帧动画首先需要准备好包含动画关键帧的雪碧图

例如素材：

雪碧图素材

代码这么写：

<div class="frames-anim"></div>

*{
  padding: 0;
  margin: 0;
}
.frames-anim {
  width: 200px;
  height: 200px;
  margin: 100px auto;
  border: 2px solid #000;
  background-image: url(https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/3ebbfd81f7d44fa7aed72ef97bf27981~tplv-k3u1fbpfcp-watermark.image);
  background-repeat: no-repeat;
  background-size: 200px 600px;
  animation: run 3s linear infinite;
}

@keyframes run {
  0% {
    background-position: 0 0;
  }
  25% {
    background-position: 0 -200px;
  }
  50% {
    background-position: 0 -400px;
  }
}

其表现：

帧动画.gif

是一个连续过程，如果想要一帧一帧播放，那么还需要给animation的linear动画变换函数换成steps(1, end)

在官方文档上解释了step easing function，一般来讲，我们可能会用到start和end（分别等同于jump-start和jump-end），例如：steps(1, end)，第一个参数1也就每一次播放@keyframes中定义定义关键帧的个数，第二个参数end即在第一帧播放完成时立马切换到下一帧。

预览效果

从上图可以看出简单的帧切换之间其实没有特别大的变换，steps()第二个参数的差异不大，那么给animation加上了steps()变换函数后的效果如下：

帧动画预览效果

看起来还不错～

总结

一个简单的CSS background属性，其中却包含了多个相关属性以及规则，才使得其变换更加复杂，表现也更加丰富。从另一个角度而言，CSS是一种样式表现的描述语言，CSS的规则虽然复杂，但它们总是基于计算机所能构建的几何世界来呈现一个图形界面给用户，CSS似乎又变得简单起来...

Reference

《Background - MDN》- https://developer.mozilla.org/zh-CN/docs/Web/CSS/background
《CSS Images Module Level 3》- https://drafts.csswg.org/css-images-3/#gradients
《CSS奇思妙想 -- 使用 background 创造各种美妙的背景》- https://juejin.cn/post/6925600887947657224
《CSS3动画之逐帧动画》- https://jelly.jd.com/article/6006b1035b6c6a01506c87a7
《一个div能做什么》- https://jelly.jd.com/article/5fe1f177dfdd9d014fbb591d
《前端逐帧动画性能探究和比较》- https://juejin.cn/post/6925400603300478983

本文参与腾讯云自媒体同步曝光计划，分享自微信公众号。

原始发表：2021-03-23，如有侵权请联系 cloudcommunity@tencent.com 删除

css

https

网络安全

本文分享自 DYBOY 微信公众号，前往查看

如有侵权，请联系 cloudcommunity@tencent.com 删除。

本文参与腾讯云自媒体同步曝光计划，欢迎热爱写作的你一起参与！

css

https

网络安全

登录后参与评论

0 条评论

热度