原来CSS的background还可以这么玩

馒头老爸 等级 560 0 1

身为一个前端开发者,背景是开发中的常客。大到整个网站的主题背景,小到一个按钮的背景。CSS 的 background 属性基本上每天开发都会遇到,绝大多数情况下我们都只会使用到了纯色背景或者图片背景。如果你想让你开发的内容看起来更加生动有趣,通过本文让你用纯CSS也可以开发出炫酷的背景。

开始之前

在开始之前,先请你回答下面的问题,如果你能全部回答正确,说明你对 background 属性掌握的还不错哦!

1.径向渐变默认形状是什么?

A:原型 B:椭圆形

2. background 属性的值为多个时,哪个值的图层在最顶部?

A:第一个值 B:最后一个值

3. background: green, linear-gradient(red, pink); 效果是什么?

A:绿色背景 B:红粉渐变背景 C:没有背景

4. 当background属性有多个值时,如何指定每层背景的大小?

基础背景

首先还是先回顾一下基础背景有哪些,最简单的就是 纯色背景

background: pink;

原来CSS的background还可以这么玩

线性渐变,当然你还可以自定义方向:

.linear {
    background: linear-gradient(red, pink);
}
.linear1 {
    background: linear-gradient(145deg, red 20%, pink);
}

原来CSS的background还可以这么玩

径向渐变

background: radial-gradient(red, pink);

原来CSS的background还可以这么玩

角向渐变

background: conic-gradient(red, pink);

原来CSS的background还可以这么玩

基础背景扩展

纯色背景就没什么可说的了,只能改变颜色。

线性背景

对于线性背景 ,我们可以设置多种颜色,还可以指定每种颜色的绘制位置:

background: linear-gradient(-50deg, #F7A37B, #F7A37B, #FFDEA8, #FFDEA8, #D0E4B0, #D0E4B0, #7CC5D0, #7CC5D0, #00A2E1, #00A2E1, #0085C8, #0085C8);

原来CSS的background还可以这么玩

background: linear-gradient(
    -50deg, 
    #F7A37B, 
    #F7A37B, 
    #FFDEA8, 
    #FFDEA8 20%, 
    #D0E4B0, 
    #D0E4B0,  
    #00A2E1 20%, 
    #00A2E1, 
    #0085C8, 
    #0085C8
);

原来CSS的background还可以这么玩

现在看起来每种颜色之间都是有一定的过渡效果的,通过控制每种颜色绘制的位置,可以消除掉过渡效果:

background: linear-gradient(
    -50deg,
    #F7A37B,
    #F7A37B 10%,
    #FFDEA8 10%,
    #FFDEA8 20%,
    #D0E4B0 20%,
    #D0E4B0 30%,
    #7CC5D0 30%,
    #7CC5D0 40%,
    #00A2E1 40%,
    #00A2E1 50%,
    #0085C8 50%,
    #0085C8 60%
);

原来CSS的background还可以这么玩

但是蓝色占了一大块,并不美观,一组颜色通过使用重复背景可以达到令人满意的效果。

background: repeating-linear-gradient(
    -50deg,
    #F7A37B,
    #F7A37B 1em,
    #FFDEA8 1em,
    #FFDEA8 2em,
    #D0E4B0 2em,
    #D0E4B0 3em,
    #7CC5D0 3em,
    #7CC5D0 4em,
    #00A2E1 4em,
    #00A2E1 5em,
    #0085C8 5em,
    #0085C8 6em
);

原来CSS的background还可以这么玩

径向背景

重复背景在径向中同样耐看

background: repeating-radial-gradient(
    #F7A37B,
    #F7A37B 1em,
    #FFDEA8 1em,
    #FFDEA8 2em,
    #D0E4B0 2em,
    #D0E4B0 3em,
    #7CC5D0 3em,
    #7CC5D0 4em,
    #00A2E1 4em,
    #00A2E1 5em,
    #0085C8 5em,
    #0085C8 6em
);

原来CSS的background还可以这么玩

当宽高不同时,会呈现出椭圆形,如果你想让图案为原型,可以指定 repeating-radial-gradient 的第一参数为 circle

background: repeating-radial-gradient(
    circle,
    #F7A37B,
    #F7A37B 1em,
    #FFDEA8 1em,
    #FFDEA8 2em,
    #D0E4B0 2em,
    #D0E4B0 3em,
    #7CC5D0 3em,
    #7CC5D0 4em,
    #00A2E1 4em,
    #00A2E1 5em,
    #0085C8 5em,
    #0085C8 6em
);

原来CSS的background还可以这么玩

调整第一个参数,你可以得到不同的图案

第一个参数除了可以指定园的类型外,还可以定义渐变大小以及位置:

background: repeating-radial-gradient(100% 100% at 30% 30%,#F7A37B,#F7A37B 1em,#FFDEA8 1em,#FFDEA8 2em,#D0E4B0 2em,#D0E4B0 3em,#7CC5D0 3em,#7CC5D0 4em,#00A2E1 4em,#00A2E1 5em,#0085C8 5em,#0085C8 6em);
background: repeating-radial-gradient(100% 200% at 40% 40%,#F7A37B,#F7A37B 1em,#FFDEA8 1em,#FFDEA8 2em,#D0E4B0 2em,#D0E4B0 3em,#7CC5D0 3em,#7CC5D0 4em,#00A2E1 4em,#00A2E1 5em,#0085C8 5em,#0085C8 6em);

原来CSS的background还可以这么玩

定义形式为:size at positon

  • position : 定义圆心位置,默认值为 center ,可以设定为topbottomleftright ,也可以使用坐标表示
  • size:定义渐变大小,如 100% 200%,它表示的意思是横向保持,纵向在原来的基础上扩展一倍。因此上面的第二张图本来是椭圆形,现在呈现为圆形。

关键知识点

size 不要误解为是缩放比例,上面的 100% 200%5% 10% 的效果一样的,并不是相对于原来的大小进行缩放,大小在指定颜色的时候进行设定。

你如果设置为 500% 500% ,其效果与未设置该值是相同的,其表现应该是:在较大的值的方向上(第一个值大时为横向,第二个值大时为纵向),放大较大的值/较小的值 倍。

角向渐变

把div圆角设为50%,首尾颜色相同,一个色盘就出来了

background: conic-gradient(red, orange, yellow, green, teal, blue, purple, red);
border-radius: 50%;

原来CSS的background还可以这么玩

组合背景

background 属性可以同时设置多个背景,多个背景相互叠加可以组合出奇妙图案。

原来CSS的background还可以这么玩

制作这种类型的背景,有两点需要注意:

  • 通过 background-size 属性设置每个背景的大小;
  • 巧妙运用透明色 transparent

拿第二个背景来作为例子讲解,它的过程如下:

原来CSS的background还可以这么玩

第一步:边框

这里可以使用背景来设置,使用 borderbox-shadow 的方式更加简单

border-radius: 50%;
border: 1px solid #00caf5;
box-shadow: 0 0 0 10px rgba(255,255,255,0.8) inset;

第二步:小球

通过 background-size 设置背景宽高都为30px,然后通过 radial-gradient 绘制小球。其中蓝色是从圆心到半径为9px的地方,大于10px的地方为透明色。

background: radial-gradient(#00caf5 9px,transparent 10px);
background-size: 30px 30px;

第三步:圆环

同样还是使用镜像渐变,与画小球的原理相同,圆心可以做是上一步的小球,在外面多了圆环,这里需要让圆环过程无限的重复,需要使用 repeating-radial-gradient

background: repeating-radial-gradient(#00caf5 0,#00caf5 4px,transparent 5px,transparent 20px,#00caf5 21px,#00caf5 25px,transparent 26px, transparent 50px);
background-size: 90px 90px;

中间的四角星是由于背景的宽高只有90px,超出部分隐藏,这样每个重复背景的四个角衔接时就形成了看到的样子。

原来CSS的background还可以这么玩

第四步:合成

最后把上面的几个背景进行合并,多个 backgroundbackground-size 的值以 , 分隔,backgroundbackground-size的值是一一对应的,若background 值的数量多于background-size,那么多余的部分会从background-size的第一个开始轮询对应。

这里> 看效果,关注公众号【前端筱园】,回复“CSS背景”获取本期全部源码;

关键知识点:

  1. background 存在多个值时,前面的值优先级更高,也就是说前面的背景会覆盖后面的背景。

来看个例子:

background: radial-gradient(#00caf5 9px,transparent 50px), pink;
background: linear-gradient(pink, pink), radial-gradient(#00caf5 9px,transparent 10px);

原来CSS的background还可以这么玩

如果第一个值需要是纯色背景的情况下,不能使用颜色直接表示,否则 background 属性设置值无效,我的方法是使用线性渐变代替。

我后面也想了一下原因,由于前面的优先级更高,如果第一个值为纯色背景的话,后面的值效果也无法展现,那么与直接只设置一个纯色值为背景的效果是一样。

background: linear-gradient(pink, pink), radial-gradient(#00caf5 9px,transparent 10px);
/*等效于*/
background: pink;
  1. 可以通过 background-size 设置每层背景的大小,如果现在有4层背景,但是background-size 只设置了两个值,那么第3个和第4个背景应该是多大?
background:linear-gradient(-30deg, transparent, transparent 45%, rgb(217, 255, 0), transparent 55%, transparent 100%),
    linear-gradient(30deg, transparent, transparent 45%, rgb(255, 115, 0), transparent 55%, transparent 100%),
    radial-gradient(rgb(255, 192, 218),rgb(255, 192, 218) 30%, transparent 20%),
    radial-gradient(#0085C8 , #0085C8 50%,transparent 50%);
    background-size: 50px 50px, 25px 25px;

直接看效果:

原来CSS的background还可以这么玩

可以看出,第三个背景的大小为 50px 50px ,第4个背景的大小为 25px 25px,可以得出第 n 个背景的大小为 background-size 的第 n%background-size值的个数 个值。

混合背景

说到混合背景,不得不引出另外一个css属性 mix-blend-mode 混合模式。混合模式最常见于 photoshop 中,是 PS 中十分强大的功能之一。在 CSS 中,我们可以利用混合模式将多个图层混合得到一个新的效果。

将两个线性渐变背景重叠起来,看一下会得到什么:

原来CSS的background还可以这么玩

在我们意料之中,因为背景是不透明的,前面的背景会覆盖后面的背景。

现在为它加上mix-blend-mode: multiply 属性看看呢:

原来CSS的background还可以这么玩

此时两个背景重叠后会产生一些奇妙的效果,前后背景重叠部分的颜色叠加到一起了,完整代码如下:

 div {
      display: inline-block;
      position: relative;
      width: 240px;
      height: 240px;
      border: 2px solid #666;
      box-shadow: 1px 1px 4px 2px #aaa;
      margin: auto;
      color: #333;
      text-align: center;
      font-size: 16px;
      line-height: 520px;
    }
    div::after {
      content: "";
      position: absolute;
      top: 0;
      left: 0;
      bottom: 0;
      right: 0;
      background:
        repeating-linear-gradient(#F7A37B,#F7A37B 1em,#FFDEA8 1em,#FFDEA8 2em,#D0E4B0 2em,#D0E4B0 3em,#7CC5D0 3em,#7CC5D0 4em,#00A2E1 4em,#00A2E1 5em,#0085C8 5em,#0085C8 6em);
      animation: move 5s infinite linear;
      mix-blend-mode: multiply;
    }

    div::before {
      content: "";
      position: absolute;
      top: 0;
      left: 0;
      bottom: 0;
      right: 0;
      background:
        repeating-linear-gradient(#F7A37B,#F7A37B 1em,#FFDEA8 1em,#FFDEA8 2em,#D0E4B0 2em,#D0E4B0 3em,#7CC5D0 3em,#7CC5D0 4em,#00A2E1 4em,#00A2E1 5em,#0085C8 5em,#0085C8 6em);
      background-size: 30px 30px;
    }

当然,你可使用不同的混合模式来做出一些不同的效果:

原来CSS的background还可以这么玩

也可以使用径向渐变:

原来CSS的background还可以这么玩

你还可以使用各种组合方式,通过改变颜色、大小、渐变方式、混合模式等可以得到各种各样的背景。

原来CSS的background还可以这么玩

使用 mix-blend-mode 还可以做出一些炫酷的效果,比如说 故障艺术 ,感兴趣的可以看下这篇文章 奇思妙想CSS之“故障艺术”

随机背景

先看效果,每次刷新后的背景都是随机生成的 预览1 预览2

原来CSS的background还可以这么玩)原来CSS的background还可以这么玩

要实现这样的背景,这就需要借助一个强大的CSS图案WEB组件 css-doodle,后面会专门写一篇针对css-doodle的讲解。

关注公众号【前端筱园】,回复“CSS背景”获取本期全部源码;

动态背景

上面所有的背景都是静态的,我们现在要让背景动起来。

这次我们多创建几个不同类型的渐变背景

原来CSS的background还可以这么玩

分别使用不同的混合模式将他们叠加起来

原来CSS的background还可以这么玩

效果看起来是不是很棒,还没完,现在让背景动起来

原来CSS的background还可以这么玩 对每个背景都使用 hue-rotate 滤镜,从而改变每层背景的色相值,使用混合模式相互叠加后,就可以看到杂乱无序的眩光效果了。

@keyframes move {
    0% {
        filter: unset;
    }

    100% {
        filter: hue-rotate(360deg);
    }
}

当然,我们同样可以借助 css-doodle 来随机生成眩光,,每次点击后的效果都不一样。在线体验

原来CSS的background还可以这么玩

使用mask

顾名思义,mask 译为遮罩。在 CSS 中,mask 属性允许使用者通过遮罩或者裁切特定区域的图片的方式来隐藏一个元素的部分或者全部可见区域。

mask提供一种基于像素级别的,可以控制元素透明度的能力,类似于png24位或png32位中alpha透明通道的效果。

现在有这样一个图案:

background: radial-gradient(circle,#00caf5 5px,transparent 0) 0 0;
background-size: 10px 10px;

原来CSS的background还可以这么玩

有这样个遮罩,这里先使用背景代替:

background: linear-gradient(transparent 20%, rgb(29, 26, 26) 30%, transparent);

原来CSS的background还可以这么玩

现在将他们重叠起来,定义这样的规则:遮罩白色部分为不透明,黑色部分为透明,就会得到这样的效果

原来CSS的background还可以这么玩

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-gPnuZNC0-1615253124602)(https://www.dengzhanyong.com/PHP/images/1614927240.png)]

这个遮罩就是 mask,完整代码如下:

background: radial-gradient(circle,#00caf5 5px,transparent 0) 0 0;
background-size: 10px 10px;
mask: linear-gradient(transparent 20%, #000 30%, transparent);

利用 mask 可以做出一些完全想象不到的图案,及时你看到源代码也无法想象它最终呈现的样子。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-txlASYLk-1615253124602)(https://www.dengzhanyong.com/PHP/images/1614926346.png)]

但是很遗憾的是, mask 的兼容性不是很好,目前只有 Firefox 和 Edge 浏览器支持。

原来CSS的background还可以这么玩

同样,借助 css-doodle 可以做出各式各样的万花筒效果:预览

原来CSS的background还可以这么玩

使用 box-shadow

除了使用 background 属性外,我们还可以使用阴影来制作背景。

我们用 div 来制作一个按钮,首先还是使用 background 来制作背景:

display: inline-block;
background: seagreen;
color: #fff;
padding: 0 10px;
line-height: 2em;
border-radius: 3px;

原来CSS的background还可以这么玩

为了使按钮赋有立体感,现在为它加上阴影和高光:

box-shadow: 2px 2px 3px #555;
background: linear-gradient(#fff, transparent 5px), linear-gradient(to right, #fff, transparent 5px), radial-gradient(seagreen 0%,seagreen 100%);

原来CSS的background还可以这么玩

上面所有的效果都可以使用 box-shadow 来实现:

box-shadow: 2px 2px 3px #555, 2px 2px 3px #fff inset, 100px 100px seagreen inset;

可以看出,这种实现方式简单很多,只需要一行代码,这里巧妙的运用了内阴影来充当背景。

原来CSS的background还可以这么玩

box-shadow: 2px 2px 3px #555, 2px 0px 10px 5px red inset, 100px 100px yellow inset;
box-shadow: 2px 2px 3px #555, -5px -5px 10px 1px #fff inset, 0 0 13px 1px rgb(0, 255, 170) inset, 100px 100px yellow inset;

background 属性有一个共同点,当box-shaodow 存在多个值时,前面的值所在图层更高。

总结

通过本文的学习后,我们认知不再局限于纯色背景或者渐变背景,利用 mix-blend-modebox-shadowfiltermask可以创作出一些意想之外的效果。

虽然说某些属性目前的兼容性还不是很好,不过随着CSS3的日益壮大,通过 background 来替换一些图片资源得到的效果更佳。来动动你的手指尝试下吧。

最后,如果你觉得我的文章对你有所帮助,那就一键三连支持下吧! 欢迎关注我的公众号【前端筱园】,不错过我的每一篇推送 来体验下我的小程序吧【小馒居】,每天坚持打卡,不仅收获知识,更有奖金等你拿哦 如果文章内容有问题,望指正,谢谢

收藏
评论区

相关推荐

前端开发中79条不可忽视的知识点汇总
过往一些不足的地方,通过博客,好好总结一下。 1.css禁用鼠标事件 css .disabled { pointerevents: none; cursor: default; opacity: 0.6; } 2.get/post的理解和他们之间的区别 http 超文本传输协议(HTTP)的设计目的是保证客户机
《css大法》之使用伪元素实现超实用的图标库(附源码
今天我们来复盘一下前端中css伪元素的知识以及如何用css伪元素来减轻javascript的压力,做出一些脑洞大开的图形。 预备知识 伪元素 伪元素是一个附
《前端实战总结》之使用纯css实现网站换肤和焦点图切换动画
今天我们来继续复盘一些工作中常用的css技巧和知识,以便我们可以更加优雅的用css实现富有动感的网站. 你将收获 网站换肤设计方案介绍 :target伪类介绍和用法以及如何使用css实现网站换肤 transition动画以及如何用纯css实现焦点图动画 效果展示 1.网站换肤 (https://imghelloworld.ossc
巧用css圆角实现有点意思的加载动画
作为一名前端工程师, 需要对css技巧有充分的研究和了解, 接下来笔者将会带大家一起掌握如何用css的圆角属性来实现有点意思的加载动画. 如果想学习更多css实用技巧, 可以参考笔者以下的文章: <div style"display:flex; flexwrap:wrap; alignitems: center;" <a href"https:/
2. web前端开发分享-css,js进阶篇
2. web前端开发分享css,js进阶篇 一,css进阶篇:   等css哪些事儿看了两三遍之后,需要对看过的知识综合应用,这时候需要大量的实践经验, 简单的想法:把qq首页全屏另存为jpg然后
CSS Modules 解决 react 项目 css 样式互相影响的问题
CSS Modules 解决 react 项目 css 样式互相影响的问题 CSS Modules 解决 react 项目 css 样式互相影响的问题 (http
css问题
1、 在IOS中图片不显示(给图片加了圆角或者img没有父级) <div<img src""/</div div {width: 20px; height: 20px; borderradius: 20px; overflow: h
原来CSS的background还可以这么玩
身为一个前端开发者,背景是开发中的常客。大到整个网站的主题背景,小到一个按钮的背景。CSS 的 background 属性基本上每天开发都会遇到,绝大多数情况下我们都只会使用到了纯色背景或者图片背景。如果你想让你开发的内容看起来更加生动有趣,通过本文让你用纯CSS也可以开发出炫酷的背景。 开始之前在开始之前,先请你回答下面的问题,如果你能全部回答
30个前端开发人员必备的顶级工具
在本文中,我为前端Web开发人员汇总了30种顶级工具,从代码编辑器和代码游乐场到CSS生成器,JS库等等。 (https://imghelloworld.osscnbeijing.aliyuncs.com/2e7966318084a45d05a0926cbd749a02.png) 目录 CSS代码生成器 CSS3 Generator
Vue进阶(幺柒陆):CSS预编译语言Sass、Scss、Less和Stylus
什么是CSS预处理器CSS预处理器定义了一种新的语言,它的基本思想是,用一种专门的编程语言,进行网页样式设计,然后再编译成正常的CSS文件。开发者只需要使用这种语言进行编码工作,减少枯燥无味的CSS代码
只听说过CSS in JS,怎么还有JS in CSS?
CSS in JS是一种解决css问题想法的集合,而不是一个指定的库。从CSS in JS的字面意思可以看出,它是将css样式写在JavaScript文件中,而不需要独立出.css、.less之类的文件。将css放在js中使我们更方便的使用js的变量、模块化、treeshaking。还解决了css中的一些问题,譬如:更方便解决基于状态的样式,更容易追溯依赖关
你可能不知道的10个CSS新功能(2021版)
多年来,CSS已经超越了背景颜色、边框、文本样式、边距和盒模型。现代CSS能够提供一系列的功能,而在过去,您需要JavaScript或变通方法来实现这些功能。 为了庆祝它在2021年取得的成就,在这篇文章中,我们想看看一些你可能不知道的令人惊叹的CSS新特性。我们将强调web设计人员和开发人员可以用现代CSS做的很酷的事情,讨论用例,浏览器支持,并给你一个
Fower: 一个可在 Vue 和 React 方便使用的 CSS in JS 库
一年多没写过文章了,今天给大家介绍一个我断断续续花了半年开发的 CSS 项目: . Fower 是什么?Fower 是一个让你高效开发 UI 的样式工具库,目标是让你写 CSS 不再痛苦。Fower 的核心特点是原子化(Atomic/utilityfirst)、类型安全(Type Safe)、CSS in JS,它非常注重开发体验,让你快速且开心的开发界面。
如何提高CSS性能
结合现代网站的复杂性和浏览器处理 CSS 的方式,即使是适量的CSS也会成为设备受限、网络延迟、带宽或数据限制的瓶颈。因为性能是用户体验的一个至关重要的部分,所以必须确保在各种形状和尺寸的设备上提供一致的高质量体验,这也需要优化你的CSS。本篇文章将涵盖CSS会导致哪些性能问题,以及如何制作不妨碍人们使用的CSS的最佳实践。 目录 CSS是如何工作的?
几个有点意思的 CSS 技巧
如果你是一名前端开发人员或者想成为一名开发人员,那么,我今天与你分享的9个CSS技巧,你需要知道一下。现在,我们开始吧。1、学习盒子模型你在学习 CSS 时,应该避免使用Bootstrap或TailwindCSS等框架,这些工具非常适合构建漂亮的网站,但如果你还不能正确的了解 CSS,则建议不要使用这些框架中的任何一个。因为如果你使用了这些工具,你将无法学习

热门文章

用CSS也可以任意改变PNG图标颜色?

最新文章

用CSS也可以任意改变PNG图标颜色?