CSS 背景属性

前端
CSS
作者

yangjh

发布日期

October 30, 2021

CSS 中提供了为元素设定背景的功能,我们看到许多设计精良的网页,在很大程度上是灵活运用 CSS 背景实现装饰效果的。在 CSS 中,不但可以为整个网页设定背景,也可为具体元素设定背景,任何可显示出来的元素都可以设定背景样式。

设置背景色

CSS 通过 background-color 属性为元素设定背景颜色,颜色值的设定同 color 属性。background-color 属性的默认值为 transparent(透明)。如下例中的规则将使段落中的内容颜色为黑色,段落的整体背景色为浅灰色。

p {
    background-color: #eee;
    color: black;
}

设置背景图片

一般情况下,我们会认为色块过于单调,缺少变化,因此,我们可以使用 CSS 提供的图像背景来装饰页面。在 CSS 中和图像背景有关的属性有:

  1. background-image 用来指定作为背景使用的图片所在的地址,它的值为 URL 地址或者渐变色,默认值为 none。此外,当同时定义了背景颜色和背景图像时,背景图像覆盖在背景颜色之上。
  2. background-repeat 来设定背景图片的重复方式,background-repeat 的值有:repeat(沿水平和垂直方向平铺)、repeat-x(沿水平方向平铺)、repeat-y(沿垂直方向平铺)或者 no-repeat(不平铺显示),默认值为 repeat
  3. background-position 用来设定背景图像的位置,位置信息有两个,第一个用来指定横向坐标,第二个用来指定纵向坐标。坐标的表示可以使用百分数、带单位的长度以及关键字(leftcenterrighttopmiddlebottom),默认值为 0
  4. background-attachment 用来设定背景图像的滚动模式。值有三个,其中 scroll 表示背景图像会随着页面窗口滚动;fix 表示固定在窗口,不随其滚动;local 表示元素随元素滚动时背景图像也会跟着滚动,因为背景图像总是要跟着内容。local 值是 CSS3 新增的值。background-attachment 默认值为 scroll

例如:

div#footer {
    background-image: url(bg.png);
    background-repeat: no-repeat;
    background-attachment: scroll;
    background-position: center bottom;
}

上述规则为 id 等于 footerdiv 元素指定背景图像,背景图像的来源为当前网页同级目录中的 bg.png 文件,该图片在元素背景范围内部重复,并且随网页滚动,图片的出现在 div 元素背景范围内居中靠下的位置。

其中,background-position 属性,可以使用 toprightbottomleftcenter 关键字以及像素、百分比或者其他长度单位。CSS 在定位时,坐标原点位于左上角。

通常情况下,我们将 background-colorbackground-imagebackground-position、和 background-repeat 属性简写到 background 属性中。简写时,属性的顺序有多种,普遍采用 background-colorbackground-imagebackground-position、和 background-repeat 的顺序。例如:

div {
  background: #b2b2b2 url("alert.png") 20px 10px no-repeat;
}

设置线性渐变背景

许多年以来,设计师和开发人员若要实现背景渐变效果,只能使用图像处理软件制作渐变背景图片。但在 CSS3 中,我们现在可以使用渐变背景属性来代替以往繁琐的做法,只需一条语句,就可以实现漂亮的渐变背景效果。

CSS 的线性渐变背景是在 background 或者 background-image 属性中使用 linear-gradient() 函数实现,例如:

div {
  background: #466368;
  background: linear-gradient(#648880, #293f50);
}

linear-gradient() 函数必须包括至少两个值,第一个值为渐变起始值,第二个值为渐变结束值,浏览器会计算并平滑渲染出介于这两个颜色值之间的内容。

在渐变色背景之前,我们还声明了背景色,这样做的目的是当浏览器不支持渐变色属性时,使用指定的背景色作为背景。

默认情况下,线性渐变的方向为从上至下,我们可以在颜色值之前,使用关键词或者角度来改变渐变的方向。例如:

div {
  background: #466368;
  background: linear-gradient(to right bottom, #648880, #293f50);
}

上例中,我们生成了一个从左上角渐变到右下角的渐变填充背景。

除了使用关键字之外,还可以使用角度,例如,如果我们想要生成和上例类似的渐变填充,可以使用 135deg 调整渐变角度:

.deg {
    background: #466368;
    background: linear-gradient(135deg, black, white);
    border-radius: 6px;
    height: 120px;
}

设置径向渐变

线性渐变非常适合从不同方向之间的渐变,不过有时候,我们还需要径向渐变。径向渐变使用 radial-gradient(),其他类似于线性渐变。例如:

div {
  background: #466368;
  background: radial-gradient(#648880, #293f50);
}

使用多个色标

要实现渐变效果,最少需要两个颜色值。但我们还可以使用多个色标,生成不同颜色值之间的渐变效果,不同颜色值会在指定的方向上平均分布,如:

div {
  background: #648880;
  background: linear-gradient(to right, #f6f1d3, #648880, #293f50);
}

对于新手而言,手工生成复杂的渐变效果还是比较困难的,幸运的是,网络上有很多可以在线生成渐变效果的工具,如 CSS3 gradient generators,借助于这些工具,新手可以学习复杂渐变的生成代码。

模糊

backdrop-filter CSS 属性可以让你为一个元素后面区域添加图形效果(如模糊或颜色偏移)。 因为它适用于元素_背后_的所有元素,为了看到效果,必须使元素或其背景至少部分透明。

/* 关键词值 */
backdrop-filter: none;

/* 指向 SVG 滤镜的 URL */
backdrop-filter: url(commonfilters.svg#filter);

/* <filter-function> 滤镜函数值 */
backdrop-filter: blur(2px);
backdrop-filter: brightness(60%);
backdrop-filter: contrast(40%);
backdrop-filter: drop-shadow(4px 4px 10px blue);
backdrop-filter: grayscale(30%);
backdrop-filter: hue-rotate(120deg);
backdrop-filter: invert(70%);
backdrop-filter: opacity(20%);
backdrop-filter: sepia(90%);
backdrop-filter: saturate(80%);

/* 多重滤镜 */
backdrop-filter: url(filters.svg#filter) blur(4px) saturate(150%);

/* 全局值 */
backdrop-filter: inherit;
backdrop-filter: initial;
backdrop-filter: unset;

例如:

 position: fixed;
 z-index: 20;
 top: 0;
 left: 0;
 right: 0;
 backdrop-filter: blur(4px);
 background-color: hsla(0,0%,100%,.4);
回到顶部