Famio Liew
Application/Web Beginner
home
首页
bubble_chart
工具
keyboard_arrow_down
links
链接收藏
info
关于
assignment_late
苏ICP备15006533号-1
menu 绯末小筑 famio.CN

CSS给背景图片加滤镜

绯末 于 2018-09-08 12:35:01 发布

本篇目的:为背景图片加上一个线性渐变的效果

通常给页面定义一个合适的背景图片会提升用户体验,但是如果背景图片显得突兀,与网站整体风格不协调,就有反效果。

如果让背景图片与网站风格相融为一体,又一个老师傅觉得没必要讲,新人却不知所措(或走远路)的问题。

这里我来分享一下简单的办法,举例,我需要给博客首页上个背景大图,我们一般是在CSS中这么做的:

background: url("https://oss.famio.cn/famio_cn/imgs/bg.png") no-repeat;

效果就是简单的背景图片:

CSS给背景图片加滤镜

但是这样一来,虽然整体效果还不错,但是色差明显,容易造成视觉疲劳,我们可以换一种方式。

先将标题改为白色:

CSS给背景图片加滤镜

然后修改背景图片的CSS属性:

background: linear-gradient(to bottom, rgba(255, 255, 255, 1), rgba(255, 255, 255, 0)),
            url("https://oss.famio.cn/famio_cn/imgs/bg.png") no-repeat;

这里可以看到,我们给background属性定义了两个参数,一个是linear-gradient,另一个是urllinear-gradient是线性渲染的属性,可以给指定区域“画”上一个线性渐变的效果。url则是定义背景图片的来源地址。background是可以定义多个背景参数的,多个参数中间使用逗号分隔,越靠前的参数在图层最上方。这里我们使用linear-gradient定义一个以白色为基准色的透明渐变,方向是自上而下。再在linear-gradient后面定义好背景图片,也就是说,让透明的线性渐变的效果覆盖在背景图片上。

然后效果就是我们要的这样了:

CSS给背景图片加滤镜

简单来说,实际上看下面我做的图,可能理解的更快一些。

CSS给背景图片加滤镜