置顶公告:【置顶】关于临时开启评论区所有功能的公告(2022.10.22) | 【置顶】关于本站Widget恢复使用的公告
  • 你好~!欢迎来到萌娘百科镜像站!如需查看或编辑,请联系本站管理员注册账号。
  • 本镜像站和其他萌娘百科的镜像站无关,请注意分别。

用户:JackBlock/CSS background

萌娘百科,万物皆可萌的百科全书!转载请标注来源页面的网页链接,并声明引自萌娘百科。内容不可商用。
跳到导航 跳到搜索

介绍CSS background属性的一些用法。

建议使用较新的Chrome浏览器阅读此页面。

基础参数

background:<背景块1>[,<背景块2>…]

其中写在最前的背景块置于顶层,依次向下叠加。

每一个<背景块>的参数如下:

[color] [image] [<position>[/<size>]] [repeat] [origin] [clip][1]

各个参数之间用空格分隔。positionsize之间用“/”分隔,如果需要使用size参数必须同时使用position参数。

各个参数都各自的独立CSS属性。

color

独立属性:background-color

指定背景块的颜色,只能使用一个颜色代码或生成单种颜色的函数。[2]

示例

background:#66CCFF

image

独立属性:background-image

指定背景图像[3]。也可以使用与颜色相关的CSS函数,但不能使用单种颜色。[2]

示例

background:linear-gradient(#FF7777,#77FF77,#7777FF)

关于CSS渐变色函数的使用,请参阅User:JackBlock/渐变色使用

position

独立属性:background-position

指定背景块的起始位置,包含横纵坐标(坐标原点为绘制区域的左上角,以右方向与下方向为正方向。一般使用以px为单位的长度)。如果是绝对长度,则该参数代表背景块左上角的位置;如果是百分比,则该参数代表该背景块中对应百分比坐标点的位置。不使用时默认为0。

示例

background:linear-gradient(135deg,#FF7777,#77FF77,#7777FF)

background:linear-gradient(135deg,#FF7777,#77FF77,#7777FF) 10px 10px

background:linear-gradient(135deg,#FF7777,#77FF77,#7777FF) 10px

background:linear-gradient(135deg,#FF7777,#77FF77,#7777FF) -20px 20px

background:linear-gradient(135deg,#FF7777,#77FF77,#7777FF) 210px -10px

size

独立属性:background-size

指定背景块的大小,分为横纵长度(一般可使用百分数或以px为单位的长度,或者可使用auto指定和元素大小相同)。不使用时默认和元素大小相同。

同时在image参数内的长度相关值将以此参数的值为基准。

示例

background:linear-gradient(135deg,#FF7777,#77FF77,#7777FF) 0 0

background:linear-gradient(135deg,#FF7777,#77FF77,#7777FF) 0 0/10px

background:linear-gradient(135deg,#FF7777,#77FF77,#7777FF) 0 0/20px 20px

background:linear-gradient(135deg,#FF7777,#77FF77,#7777FF) 0 0/20% 10%

background:linear-gradient(135deg,#FF7777,#77FF77,#7777FF) 0 0/auto 50px

repeat

独立属性:background-repeat

指定背景块的重复方式。

可选值如下:

  • repeat:在横纵方向都重复(不使用时的默认效果)
  • repeat-x:仅横向重复
  • repeat-y:仅纵向重复
  • no-repeat:不重复
示例

background:linear-gradient(135deg,#FF7777,#77FF77,#7777FF) 0 0/20px 20px repeat

background:linear-gradient(135deg,#FF7777,#77FF77,#7777FF) 0 0/20px 20px repeat-x

background:linear-gradient(135deg,#FF7777,#77FF77,#7777FF) 0 0/20px 20px repeat-y

background:linear-gradient(135deg,#FF7777,#77FF77,#7777FF) 0 0/20px 20px no-repeat

origin

独立属性:background-origin

指定背景绘制时的参考位置。

可选值如下:

  • padding-box:以填充框为基准(不使用时的默认效果)
  • border-box:以边界框为基准
  • content-box:以内容框为基准

background:linear-gradient(135deg,#FF7777,#77FF77,#7777FF) padding-box

文字文字文字文字文字文字文字文字文字文字文字文字文字文字

background:linear-gradient(135deg,#FF7777,#77FF77,#7777FF) border-box

文字文字文字文字文字文字文字文字文字文字文字文字文字文字

background:linear-gradient(135deg,#FF7777,#77FF77,#7777FF) content-box

文字文字文字文字文字文字文字文字文字文字文字文字文字文字

clip

独立属性:background-clip

指定背景绘制的区域。不使用时默认与origin的值相同,若origin也未指定则默认为border-box

可选值如下:

  • padding-box:填充框
  • border-box:边界框
  • content-box:内容框

background:linear-gradient(135deg,#FF7777,#77FF77,#7777FF) padding-box border-box

文字文字文字文字文字文字文字文字文字文字文字文字文字文字

background:linear-gradient(135deg,#FF7777,#77FF77,#7777FF) border-box content-box

文字文字文字文字文字文字文字文字文字文字文字文字文字文字

background:linear-gradient(135deg,#FF7777,#77FF77,#7777FF) content-box padding-box

文字文字文字文字文字文字文字文字文字文字文字文字文字文字

多层背景

如前所述,背景块可以叠加多层,可以用于设计复杂的图案。叠加顺序为从上向下叠加(后一层背景在前一层下方)。

示例
background:
    linear-gradient(45deg,#E7DDE1 25%,transparent 25%,transparent 75%,#E7DDE1 75%) 0 0/20px 20px,
    linear-gradient(135deg,#E7DDE1 25%,transparent 25%,transparent 75%,#E7DDE1 75%) 0 0/20px 20px,
    repeating-linear-gradient(to right,#FE6493 0px,#FE6493 20px,#512E53 20px,#512E53 40px);
background:
    radial-gradient(circle at 50% 50%,#FFF 4px,transparent 5px,transparent 9px,#FFF 10px) 0px 0px/20px 20px,
    linear-gradient(to bottom right,#E9FAF2,#8BCCEA,#8493AA);
background:
    conic-gradient(at 0 100%,transparent 18deg,#000 18deg,#000 54deg,transparent 54deg) 42.221px 112.803px/58.779px 69.099px no-repeat,
    conic-gradient(at 100% 100%,transparent 306deg,#000 306deg,#000 342deg,transparent 342deg) 101px 112.803px/58.779px 69.099px no-repeat,
    conic-gradient(at 0 0,transparent 90deg,#000 90deg,#000 126deg,transparent 126deg) 5.894px 70.098px/72.655px 42.705px no-repeat,
    conic-gradient(at 100% 0,transparent 234deg,#000 234deg,#000 270deg,transparent 270deg) 123.451px 70.098px/72.655px 42.705px no-repeat,
    conic-gradient(at 50% 0,transparent 162deg,#000 162deg,#000 198deg,transparent 198deg) 78.549px 1px/44.902px 69.098px no-repeat,
    radial-gradient(at 101px 101px,#000 38.197px,transparent 38.197px),
    #FFF;
分层







background:
    linear-gradient(-135deg,#A7BCC6 3.182px,transparent 3.182px) 31px 164px/32px 32px,
    linear-gradient(-135deg,#A7BCC6 3.182px,transparent 3.182px) 15px 180px/32px 32px,
    linear-gradient(-45deg,#A7BCC6 3.182px,transparent 3.182px) 31px 164px/32px 32px,
    linear-gradient(-45deg,#A7BCC6 3.182px,transparent 3.182px) 15px 180px/32px 32px,
    linear-gradient(135deg,#A7BCC6 3.182px,transparent 3.182px) 31px 164px/32px 32px,   
    linear-gradient(135deg,#A7BCC6 3.182px,transparent 3.182px) 15px 180px/32px 32px,
    linear-gradient(45deg,#A7BCC6 3.182px,transparent 3.182px) 31px 164px/32px 32px,
    linear-gradient(45deg,#A7BCC6 3.182px,transparent 3.182px) 15px 180px/32px 32px,
    repeating-linear-gradient(45deg,#D9E3E9 0px,#D9E3E9 4.950px,transparent 4.950px,transparent 22.627px),
    repeating-linear-gradient(135deg,#D9E3E9 0px,#D9E3E9 4.950px,#FFFFFF 4.950px,#FFFFFF 22.627px);
分层











注释

  1. 这里只介绍了一部分常用的,并不是全部的参数。
  2. 2.0 2.1 直接使用background属性时,background-colorbackground-image的作用常被混淆,由于上述特性,在属性非最后一层出现单个颜色代码时,可能造成整个属性无法被解析。
  3. 可能是出于安全性的原因,在萌娘百科并不能借助该属性使用图像。