专栏首页WebJ2EE【CSS】:颜色、背景

【CSS】:颜色、背景

目录
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

本文分享自微信公众号 - WebJ2EE(WebJ2EE),作者:WEBJ2EE

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

原始发表时间:2020-02-25

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 正则表达式:案例分析

    /^(?:(?:\d{1,2}|1\d{2}|2[0-4]\d|25[0-5])\.){3}(?:\d{1,2}|1\d{2}|2[0-4]\d|25[0-5]...

    WEBJ2EE
  • 【前端】:正则表达式

    /^(?:(?:\d{1,2}|1\d{2}|2[0-4]\d|25[0-5])\.){3}(?:\d{1,2}|1\d{2}|2[0-4]\d|25[0-5]...

    WEBJ2EE
  • WEB:Range 与 Selection

    为了让开发人员更方便地控制页面,“DOM2 级遍历和范围”模块定义了“范围(Range)接口”。通过范围(Range)可以选择文档中的一个区域,而不必考虑节点的...

    WEBJ2EE
  • CSS3背景

    在CSS3中,背景定位得到了扩展,它允许我们指定背景图片在距离任意角的偏移量,只需要在偏移量前面指定关键字

    踏浪
  • CSS3背景图片background属性简写/连写

    在开发中背景属性 background 还是很常用的, background 有很多属性,如 background-color 背景颜色、 background...

    德顺
  • 前端技术前沿5

    CSS3 background-origin 属性 background-origin 属性规定背景图片的定位区域。

    达达前端
  • CSS征途之Background点滴

    CSS虽算不上编程语言,确是能够真正做到网页表现与内容分离的一种样式设计语言。相对于传统HTML的表现而言,CSS能够对网页中的对象的位置排版进行像素级的精确控...

    晚晴幽草轩轩主
  • CSS实现一个粒子动效的按钮

    https://github.com/XboxYan/notes/issues/16

    Nealyang
  • CSS实现一个粒子动效的按钮

    https://github.com/XboxYan/notes/issues/16

    ConardLi
  • 从零开始学 Web 之 CSS3(三)渐变,background属性

    渐变是CSS3当中比较丰富多彩的一个特性,通过渐变我们可以实现许多炫丽的效果,有效的减少图片的使用数量,并且具有很强的适应性和可扩展性。可分为线性渐变、径向渐变...

    Daotin

扫码关注云+社区

领取腾讯云代金券