【CSS】：颜色、背景

WEBJ2EE

发布于 2020-03-02 11:21:31

2.7K0

发布于 2020-03-02 11:21:31

文章被收录于专栏：WebJ2EEWebJ2EE

目录
1. 颜色（Color）
   1.1. 具名颜色
   1.2. RGB
   1.3. HSL
2. 背景（Background）
   2.1. 背景色（background-color）
   2.2. 背景裁剪（background-clip）
   2.3. 背景图（background-image）
   2.4. 背景定位（background-position）
   2.5. 背景定位（background-origin）
   2.6. 背景重复方式（background-repeat）
   2.7. 背景图尺寸（background-size）
   2.8. 背景粘附（background-attachment）
   2.9. 写为一个属性（background）
3. 几道笔试题

1. 颜色（Color）

CSS 数据类型 <color> 表示一种标准RGB色彩空间（sRGB color space）的颜色。一种颜色可以用以下任意的方式来描述：

使用一个关键字（具名颜色）
使用 RGB 立体坐标系统（例如：#000 或 rgb(255,0,51) 或 rgba(255,0,0,0.1)）
使用 HSL 圆柱坐标系统（例如：hsl(270,100%,50%) 或 hsla(240,100%,50%,0.05)）

1.1. 具名颜色

如果只想使用基本的颜色，最简单的方法是使用颜色的名称。CSS 把这种颜色称为具名颜色（named color）。

常用的（能记住、能拼写出来的）有：black、white、yellow、red、green、grey、purple、orange。

示例：

div {
  background-color: red;
}

1.2. RGB

1.2.1. CSS 规范

颜色可以使用红-绿-蓝（red-green-blue (RGB)）模式的两种方式被定义：

十六进制符号 #RRGGBB 和 #RGB
- 三位数的 RGB 符号（#RGB）和六位数的形式（#RRGGBB）是相等的。
函数符 rgb(R,G,B)

例如：

div {
  background-color: #f00;
}

1.2.2. RGB基本原理

RGB是从颜色发光的原理来设计定的，通俗点说它的颜色混合方式就好像有红、绿、蓝三盏灯，当它们的光相互叠合的时候，色彩相混，而亮度却等于三者亮度之总和，越混合亮度越高，即加法混合。
红、绿、蓝三个颜色通道每种色各分为256阶亮度，在0时“灯”最弱——是关掉的，而在255时“灯”最亮。当三色灰度数值相同时，产生不同灰度值的灰色调，即三色灰度都为0时，是最暗的黑色调；三色灰度都为255时，是最亮的白色调。
RGB 颜色称为加成色，因为您通过将 R、G 和 B 添加在一起（即所有光线反射回眼睛）可产生白色。加成色用于照明光、电视和计算机显示器。

图1-1：光学三原色（RGB）

图1-2：RGB颜色表

示例：

<!DOCTYPE html>
<html>
<head>
  <title></title>
  <style>
    div {
      width: 100px;
      height: 100px;
      margin: 10px;
      float: left;
    }

    div:nth-of-type(1){
      background-color: #ff0000;
    }
    div:nth-of-type(2){
      background-color: #00ff00;
    }
    div:nth-of-type(3){
      background-color: #0000ff;
    }

    div:nth-of-type(4){
      background-color: #ffff00;
    }  
    div:nth-of-type(5){
      background-color: #ff00ff;
    }  
    div:nth-of-type(6){
      background-color: #00ffff;
    }    
</style>
</head>
<body>
  <div></div>
  <div></div>
  <div></div>
  <p style="clear:both;"></p>
  <div></div>
  <div></div>
  <div></div>  
</body>
</html>

1.3. HSL

颜色也可以使用 hsl() 函数符被定义为色相-饱和度-明度（Hue-saturation-lightness）模式。

1.3.1. HSL 基本原理

HSL是一种将RGB色彩模型中的点在圆柱坐标系中的表示法。HSL即色相(Hue)、饱和度( Saturation)、亮度( Lightness)。

图1-3：HSL 色相环

图1-4：HSL 色相、饱和度、明度

示例：

就说到这

个人觉着颜色这东西吧.....

大体了解即可

2. 背景（Background）

2.1. 背景色（background-color）

CSS属性中的 background-color 会设置元素的背景色。

语法：

关键点：

不是继承属性；
属性默认值为 transparent；

示例：

<!DOCTYPE html>
<html>
<head>
  <title></title>
  <style>
    div {
      padding: 1em;
    }

    div {
      border: 10px dotted;
    }
    .exampleone {
      background-color: teal;
      color: white;
    }

    .exampletwo {
      background-color: rgb(153,102,153);
      color: rgb(255,255,204);
    }

    .examplethree {
      background-color: #777799;
      color: #FFFFFF;
    }
</style>
</head>
<body>
  <div class="exampleone">
   Lorem ipsum dolor sit amet, consectetuer
  </div>

  <div class="exampletwo">
    Lorem ipsum dolor sit amet, consectetuer
  </div>

  <div class="examplethree">
    Lorem ipsum dolor sit amet, consectetuer
  </div>
</body>
</html>

2.2. 背景裁剪（background-clip）

background-clip 属性控制背景能够延伸到何处。

background-clip 只是将背景和背景色粗暴的裁剪。

（The background-clip CSS property sets whether an element's background extends underneath its border box, padding box, or content box.）

语法：

示例：

<!DOCTYPE html>
<html>
<head>
  <title></title>
  <style>
    p {
      border: .8em darkviolet;
      border-style: dotted double;
      margin: 1em 0;
      padding: 1.4em;
      background: linear-gradient(60deg, red, yellow, red, yellow, red);
      font: 900 1.2em sans-serif;
      text-decoration: underline;
    }

    .border-box { background-clip: border-box; }
    .padding-box { background-clip: padding-box; }
    .content-box { background-clip: content-box; }

    .text {
      background-clip: text;
      -webkit-background-clip: text;
      color: rgba(0,0,0,.2);
    }
</style>
</head>
<body>
  <p class="border-box">The background extends behind the border.</p>
  <p class="padding-box">The background extends to the inside edge of the border.</p>
  <p class="content-box">The background extends only to the edge of the content box.</p>
  <p class="text">The background is clipped to the foreground text.</p>
</body>
</html>

2.3. 背景图（background-image）

CSS background-image 属性用于为一个元素设置一个或者多个背景图像。

常用语法：

background-image: url("./media/examples/lizard.png");

关键点：

在绘制时，图像以 z 方向堆叠的方式进行。先指定的图像会在之后指定的图像上面绘制。因此指定的第一个图像“最接近用户”。然后元素的边框 border 会在它们之上被绘制，而 background-color 会在它们之下绘制。
如果一个指定的图像无法被绘制 (比如，被指定的 URI 所表示的文件无法被加载)，浏览器会将此情况等同于其值被设为 none。（所以，建议，即使图像是不透明的，背景色在通常情况下并不会被显示，web开发者仍然应该指定 background-color 属性。如果图像无法被加载—例如，在网络连接断开的情况下—背景色就会被绘制。）

示例：

<!DOCTYPE html>
<html>
<head>
  <title></title>
  <style>
    p {
      font-size: 1.5em;
      color: #FE7F88;
      background-image: none;
      background-color: transparent;
    }

    div {
      background-image:
        url("https://mdn.mozillademos.org/files/6457/mdn_logo_only_color.png");
    }

    .catsandstars {
      background-image:
        url("https://mdn.mozillademos.org/files/11991/startransparent.gif"), 
        url("https://mdn.mozillademos.org/files/7693/catfront.png");
      background-color: transparent;
    }
</style>
</head>
<body>
  <div>
    <p class="catsandstars">
    This paragraph is full of cats<br />and stars.
    </p>
    <p>This paragraph is not.</p>
    <p class="catsandstars">
    Here are more cats for you.<br />Look at them!
    </p>
    <p>And no more.</p>
  </div>
</body>
</html>

2.4. 背景定位（background-position）

background-position 为每一个背景图片设置初始位置。这个位置是相对于由 background-origin 定义的位置图层的。

2.4.1. 语法（仔细品一品）：

关键字（left、right、top、bottom、center）
- 位置关键字的顺序随意，只要不超过两个：一个指定横向位置，一个指定纵向位置。
- 如果使用了两个横向位置关键字（例如：right right）或两个纵向关键字（例如：top top），整个值将被忽略。
- 如果只有一个关键字，另一个假定为 center；

百分比
- 百分比值的偏移指定图片的相对位置和容器的相对位置重合。
- 值0%代表图片的左边界（或上边界）和容器的左边界（上边界）重合。值100%代表图片的右边界（或下边界）和容器的右边界（或下边界）重合。值50%则代表图片的中点和容器的中点重合。
- 注意，如果背景图片的大小和容器一样，那设置百分比的值将永远无效，因为“容器和图片的差”为0（图片永远填满容器，并且图片的相对位置和容器的相对位置永远重合）。
- 注意：第一个百分数值始终是横向偏移。
- 注意：如果只提供一个百分数值，那个值将作为横向偏移，而纵向偏移假定为 50%。

长度值
- 长度值是相对于元素背景左上角的偏移。
- 注意，关键字以外的值对轴的顺序有要求。也就是说，如果使用长度值或百分数值，横向值必须写在首位，纵向值必须写在末位。

相对于指定边偏移
- 句法是：一个边界关键字、一个偏移距离，一个边界关键字和一个偏移距离（例如：background-position: right 30% bottom 30px;）。横向和纵向的顺序随意，但是不能省略任何一个边界关键字。
- 只能把元素的边界作为偏移基准，中线不行。例如：center 25% center 25% 将被忽略。

2.4.2. 综合示例：

/* Keyword values */
background-position: top;
background-position: bottom;
background-position: left;
background-position: right;
background-position: center;

/* <percentage> values */
background-position: 25% 75%;

/* <length> values */
background-position: 0 0;
background-position: 1cm 2cm;
background-position: 10ch 8em;

/* Multiple images */
background-position: 0 0, center;

/* Edge offsets values */
background-position: bottom 10px right 20px;
background-position: right 3em bottom 10px;
background-position: bottom 10px right;
background-position: top right 10px;

/* Global values */
background-position: inherit;
background-position: initial;
background-position: unset;

2.5. 背景定位（background-origin）

background-origin 属性确定计算源图像的位置时以什么的边界为基准，定义的是背景定位区域。

注意：background-clip 定义的是对背景的切割。

The background-origin CSS property sets the background's origin: from the border start, inside the border, or inside the padding.

语法：

示例：

<!DOCTYPE html>
<html>
<head>
  <title></title>
  <style>
    div{
      width: 150px;
      height: 150px;
      padding: 50px;
      margin: 10px;
      border: 10px dashed #000000;
      float: left;
    }

    div {
      background-color: #ffff00;
      background-image: url(pic.jpg);
      background-repeat: no-repeat;
      background-size: 100px 100px;
    }

    /* backgound-clip */
    div:nth-of-type(1){
      background-clip: border-box; /* default */
    }
    div:nth-of-type(2){
      background-clip: padding-box;
    }
    div:nth-of-type(3){
      background-clip: content-box;
    }

    /* backgound-origin */
    div:nth-of-type(4){
      background-origin: border-box;
    }
    div:nth-of-type(5){
      background-origin: padding-box; /* default */
    }
    div:nth-of-type(6){
      background-origin: content-box;
    }
</style>
</head>
<body>
  <div></div>
  <div></div>
  <div></div>

  <p style="clear:both;"></p>

  <div></div>
  <div></div>
  <div></div>
</body>
</html>

2.6. 背景重复方式（background-repeat）

CSS 属性 background-repeat 定义背景图像的重复方式。背景图像可以沿着水平轴，垂直轴，两个轴重复，或者根本不重复。

background-repeat 属性只有四个值：repeat、no-repeat、space、round
如果提供两个值，第一个值应用于横向，第二个值应用于纵向。
如果只有一个值，同时应用于横向和纵向。

语法：

/* 单值语法 */
background-repeat: repeat-x;
background-repeat: repeat-y;
background-repeat: repeat;
background-repeat: space;
background-repeat: round;
background-repeat: no-repeat;

/* 双值语法: 水平horizontal | 垂直vertical */
background-repeat: repeat space;
background-repeat: repeat repeat;
background-repeat: round space;
background-repeat: no-repeat round;

background-repeat: inherit;

示例：

2.7. 背景图尺寸（background-size）

background-size 设置背景图片大小。图片可以保有其原有的尺寸，或者拉伸到新的尺寸，或者在保持其原有比例的同时缩放到元素的可用空间的尺寸。

contain、cover
- 如果你想让图像完全覆盖元素的背景，而且不在乎有部分图像超出背景绘制区域。此时，可以使用 cover。
- contain 会将图像缩放为正好放在背景定位区域中的尺寸，允许有部分区域不被图像覆盖。
- 注意，cover 和 contain 限定尺寸的图像，其尺寸始终相对背景定位区域计算，即 background-origin 定义的区域。

2.8. 背景粘附（background-attachment）

background-attachment CSS 属性决定背景图像的位置是在视口内固定，还是随着包含它的区块滚动。

2.9. 写为一个属性（background）

background 属性是一个简写属性，可以在一次声明中定义一个或多个属性：background-clip、background-color、background-image、background-origin、background-position、background-repeat、background-size 和 background-attachment。

background-size 值必须紧随 background-position 值后面，而且二者之间要以一条斜线（/）隔开。
如果同时为 background-origin 和 background-clip 提供值，前一个分配给 background-origin，后一个分配给 background-clip。
background 不要求必须设定任何值，只要有一个值，其他都可以省略。

示例：

background: green;
background: url("test.jpg") repeat-y;
background: no-repeat url("../../media/examples/lizard.png");
background: left 5% / 15% 60% repeat-x url("../../media/examples/star.png");
background: border-box red;

3. 几道笔试题

题目01：

题目02：

题目03：

题目04：

题目05：

题目06：

题目07：

题目08：

参考：

《CSS 世界》《CSS核心技术详解》《CSS权威指南第四版上册》 color： https://developer.mozilla.org/zh-CN/docs/Web/CSS/color_value mdn, background： https://developer.mozilla.org/zh-CN/docs/Web/CSS/background-color https://developer.mozilla.org/en-US/docs/Web/CSS/background-clip https://developer.mozilla.org/en-US/docs/Web/CSS/background-image https://developer.mozilla.org/zh-CN/docs/Web/CSS/background-position https://developer.mozilla.org/zh-CN/docs/Web/CSS/background-origin https://developer.mozilla.org/zh-CN/docs/Web/CSS/background-repeat https://developer.mozilla.org/zh-CN/docs/Web/CSS/background-size https://developer.mozilla.org/zh-CN/docs/Web/CSS/background-attachment 【CSS3】background-origin 和 background-clip的区别： https://www.cnblogs.com/shytong/p/5077129.html

本文参与腾讯云自媒体分享计划，分享自微信公众号。

原始发表：2020-02-25，如有侵权请联系 cloudcommunity@tencent.com 删除

css