关于 css background 属性!关于颜色和渐变的方面的,再单独总结一篇 Color

本篇主要参考了 w3c 的规范 /(中文

[[toc]]


# background-image

s
{ background-image: url("http://xxx.jpg"); }
<背景图> [,<背景图>]* 即一个或多个背景图像,由逗号分隔
初始值none
适用所有元素
是否继承
百分比形式含义N/A(无百分比形式)
计算值由给定值决定
动画特征

贴士:

  1. 可以绘制多张背景图像,设置在最前面的会绘制到最上层,最后设置的最接近背景色。
  2. 即使设置的值为 none ,宽高为 0 的图片,下载失败的图片或不能展示的图片(eg: 不支持的图片格式)。
    仍然会创建图片层,但不会绘制任何东西。

eg: 实际绘制的背景层为 3

s
{
  background-image: url(flower.png), none, url(grass.aaa);
}
  1. 在设置背景图像时对应设置一个背景色来应对图像无法获取的情况

eg: 低版本浏览器不支持颜色渐变

s
{
  background-color: red;
  background-image: linear-gradient(red #f00000);
}
  1. 图片有些时候无法正常显示,如在无图演示,或在高对比度模式中。所以不应该使用背景图像作为展示重要信息的唯一途径

# 背景图可选值

  1. none : 默认值,无背景图像,会生成图层但不会绘制任何东西
  2. url(<路径>) : 指向图像的路径
  3. linear-gradient : 线性变化
  4. repeating-linear-gradient : 重复线性变化
  5. radial-gradient : 径向变化

# background-color

s
{
  background-color: red;
}
<颜色值>
初始值transparent
适用所有元素
是否继承
百分比形式含义N/A(无百分比形式)
计算值计算出的颜色值
动画特征颜色值

贴士:

  1. 背景色会显示在该元素所有背景图像的下面
  2. 背景色会与最底层的背景图像共用同一个 background-clip

# background-repeat

s
{
  background-repeat: no-repeat;
}
<平铺样式> [,<平铺样式>]*
初始值repeat
适用所有元素
是否继承
百分比形式含义N/A(无百分比形式)
计算值是一个 <平铺样式> 的列表,每一个 <平铺样式> 都包含两个代表维度的值
动画特征as repeatable list of sample list of length, percentage, or calc

# <平铺样式> 可选值

s
{                                 /*   x 轴方向      y 轴方向  */
  background-repeat: repeat;      /*   repeat      repeat  */
  background-repeat: repeat-x;    /*   repeat    no-repeat */
  background-repeat: repeat-y;    /*  no-repeat    repeat  */
  background-repeat: no-repeat;   /*  no-repeat  no-repeat */
  background-repeat: space;       /*    space       space  */
  background-repeat: round;       /*    round       round  */
}
  1. repeat : 重复平铺
  2. no-repeat : 不重复平铺
  3. round : 背景图像自动缩放直到适应且填充某个方向
  4. space : 背景图像以相同的间距平铺且填充某个方向

链接更多关于 round, space 的介绍

贴士

  1. repeat , no-repeat , spaceround 可以任意两两组合赋值给 background-repeat
  2. 有多个图像叠加但只有一组平铺参数时,这些图像共享一个 background-repeat
s
{
  background-image: url("cat.jpg"), url("dog.jpg");
  background-repeat: space no-repeat; /* 两张图片都只会在横向均匀分布开 */
  background-repeat: space no-repeat, no-repeat space; /* cat.jpg 在横向均匀分布开,dog.jpg 在纵向分布开 */
}

# background-position

<位置> [,<位置>]*
初始值0% 0%
适用所有元素
是否继承
百分比形式含义相当于背景位置的大小减去背景图像的大小(这样使用 50% 就会让图像居中,而不是图像的左上角在 50% 处,而长度单位不会有此效果)
计算值是一个 <位置> 的列表,每一个 <位置> 都是一对相对于左上角的偏移量,他们可以是长度也可以是百分量
动画特征列表的 <位置> 使用的是长度,半分比,或者计算值(也就是使用 center 这样的关键字并不会触发动画)

贴士

  1. 如果只给一个值,另一个则会被设置为 center

eg:

s
{
  background-position: 12px; /* 12px center */
  background-position: top;  /* center top */
}
  1. <位置> 在使用两个关键字时可以重新排序,其中一个是长度和百分值就不会重新排序

eg:

s
{
  background-position: center left; /* left center */
  background-position: 20% left; /* 此样式不生效 */
}
  1. <位置> 可以指定从哪个方向来计算背景图像的偏移量
    eg:
s
{
  background-position: left 10px top 15px;      /* 10px, 15px */
  background-position: left      top     ;      /*  0px,  0px */
  background-position: left      top 15px;      /*  0px, 15px */
  background-position: right 10px bottom 10px;  /* right 10px bottom 10px */
}
  1. <位置> 设置为百分比值与设置为长度的区别

eg:

s
{
  background-position: 75% 50%;   
}
/*
|          75%            |    25%    |
|-------------------------------------|------------
| container     75%       |  25%      |
|           |-------------|-----|     |   50%
|           |             |     | 50% |
|-------------------------|-----------|------------
|           | background  |     |     |
|           |-------------|-----|     |
|                         |           |
|-------------------------------------|------------
|                         |           |
*/
  • 定位区域的宽度的 75% 减去图片宽度的 75% 是背景图片距离左侧的偏移量
  • 定位区域的高度的 50% 减去图片高度的 50% 是背景图片距离顶部的偏移量

图片的宽高是由 background-size 决定的


# background-size

<背景图像尺寸> [,<背景图像尺寸>]*
初始值auto
适用所有元素
是否继承
百分比形式含义相当于背景位置的大小减去背景图像的大小(这样使用 50% 就会让图像居中,而不是图像的左上角在 50% 处,而长度单位不会有此效果)
计算值是一个 <位置> 的列表,每一个 <位置> 都是一对相对于左上角的偏移量,他们可以是长度也可以是百分量
动画特征列表的 <背景图像尺寸> 使用的是长度,半分比,或者计算值(也就是使用 center 这样的关键字并不会触发动画)

# <背景图像尺寸>

<长度> | < 百分比 > | auto | cover | contain

  1. contain: 在将背景图像较长的一边拉伸到 100%,
  2. cover: 将背景图片较短的一边拉伸到 100%,

# background-attachment

<attachment>scroll , fixed , local
初始值scroll
适用所有元素
是否继承
百分比形式含义N/A(无百分比形式)
计算值由给定值决定
动画特征
  • fixed : 固定在屏幕上,不随元素滚动
  • scroll : 随着元素本身滚动
  • local : 随着元素内容滚动,并且定位在滚动内容上,不是元素上,即定位 bottom 后,滚动到最下方才会看到

ps:

  1. fixed 属性值会将绘制背景的起始位置固定到 page box 上,与本身的 background-origin 不再有关系
  2. overflow: visible; 也看不到 fixed 到元素外面的背景

# background-clip

<盒模型>border-box , padding-box , content-box
初始值border-box
适用所有元素
是否继承
百分比形式含义N/A(无百分比形式)
计算值由给定值决定
动画特征
s
element { background-color: red; }
/*
background-clip: border-box;
-----------------------
|         border-box  [background-color: red]
|   -------------------
|   |     padding-box [background-color: red]
|   |   ---------------
|   |   | content-box [background-color: red]
|   |   |
background-clip: padding-box;
....
background-clip: content-box;
-----------------------
|         border-box  [background-color: transparent]
|   -------------------
|   |     padding-box [background-color: transparent]
|   |   ---------------
|   |   | content-box [background-color: red]
|   |   |
*/

ps:

  1. 根元素有着不同的背景绘制区,所以 background-clip 在根元素上不生效
  2. 背景绘制总在边框的下方

# background-origin

<盒模型>border-box , padding-box , content-box
初始值padding-box
适用所有元素
是否继承
百分比形式含义N/A(无百分比形式)
计算值由给定值决定
动画特征
element { 
  background-image: url('28x28.png'); 
  background-repeat: no-repeat;
}
/*
background-origin: border-box;
-------------------------
|[28x28.png] border-box
|   ---------------------
|   |        padding-box 
|   |   -----------------
|   |   |    content-box
|   |   |
background-origin: padding-box;
....
background-origin: content-box;
-----------------------
|         border-box
|   -------------------
|   |     padding-box
|   |   ---------------
|   |   |[28x28.png]
|   |   | content-box
*/

ps:

  1. 如果 background-attachment: fixed 则此属性无效
  2. 如果某个方向上有 repeat 属性,背景图会根据 background-origin 设定起始位置,但是它还是会在该方向上以图像填满背景

# background

<bg-layer># , <final-bg-layer>
初始值根据独立属性
适用所有元素
是否继承
百分比形式含义根据独立属性
计算值根据独立属性
动画特征根据独立属性
  • <bg-layer> = ```
s
body { 
  background:
    red                  /* color: red */
                         /* image: none */
                         /* position: 0% 0% */
                         /* size: auto */
                         /* repeat: repeat, repeat */
                         /* attachment: scroll */
                         /* clip: border-box */
                         /* origin: padding-box */
  ;
}
p { 
  background: 
    url("chess.png")     /* image: url("chess.png") */
    40%                  /* position: 40% 50% */
    / 10em               /* size 10em 10em */
    gray                 /* color: gray */
    round                /* repeat: round round */
    fixed                /* attachment: fixed */
    border-box           /* clip, origin: border-box */
  ;
}
p {
  background: 
    red                  /* color: red */
    url("28x28.png")     /* image: url("28x28.png") */
    right 15px top 200px /* position: right 15px top 200px  */
    / 50px 50px          /* size: 50px 50px */
    no-repeat repeat     /* repeat: round repeat */
    fixed                /* attachment: fixed */
    border-box           /* origin: border-box */
    content-box          /* clip: content-box */
  ;
}
p {
  background: url(a.png) top left no-repeat,
              url(b.png) center / 100% 100% no-repeat,
              url(c.png) white;
}
/*
background-image:      url(a.png),  url(b.png),          url(c.png);
background-position:   top left,    center,              top left;
background-repeat:     no-repeat,   no-repeat,           repeat;
background-clip:       border-box,  border-box,          border-box;
background-origin:     padding-box, padding-box,         padding-box;
background-size:       auto auto,   100% 100%,           auto auto;
background-attachment: scroll,      scroll,              scroll;
background-color:      white;
*/

# 特殊的背景绘制

  1. ::first-line::first-letter 伪类都被视为行内块,背景绘制不会充满一行(就算是块级元素包裹也不会)
  2. 如果 <html> 没有指定颜色,则会用 <body> 的背景色填充页面

# 最后

最近在看一本书(《CSS 揭秘》),里面介绍了样式表里很多细节的东西。这才发现自己每天太过关注于时髦事物,
忽略了基础技能的深化。我想这并不利于职业发展,索性放弃一些东西

更新于 阅读次数

请我喝[茶]~( ̄▽ ̄)~*

不会游泳 微信支付

微信支付

不会游泳 支付宝

支付宝

不会游泳 贝宝

贝宝