search

TanXinNiao / blog

贪心鸟的博客
0 stars 0 forks source link

CSS权威指南（第4版）第九章 颜色、背景和渐变 #19

Open TanXinNiao opened 3 years ago

TanXinNiao commented 3 years ago

还记得你第一次修改网页的颜色是什么时候吗？以前网页总是白底黑字，其间有一些蓝 色的链接，突然之间，你可以按自己的意愿任意组合颜色了，可以是黑底蓝字，还可以 把链接改成绿黄色。虽然一个页面中的文本可以使用多种不同的颜色，但这只是在改变 文本颜色上迈出的一小步。

等到可以添加背景图后，似乎任何效果都能实现了。层叠样 式表（Cascading Style Sheet, CSS）进一步挖掘了颜色和背景的能力，可以为一个页面 或元素应用很多不同的颜色和背景。是的，你没看错，一个元素可以有多个背景。

TanXinNiao commented 3 years ago

颜色和背景我在第一本读书笔记写得七七八八了，而且大家用得也多基本都会，这本书也没什么新东西，就被我跳过了

TanXinNiao commented 3 years ago

背景图裁剪和重复需要有实践和联系才好理解和掌握

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN" "http://www.w3.org/TR/REC-html40/strict.dtd">
<html>

<head>
  <title>Complexspiral Redux</title>
  <style type="text/css">
    <!--
    body {
      position: relative;
      margin: 0;
      padding: 0;
    }

    div#content {
      margin: 5em 5em 10em 5em;
      padding: 10px;
      color: black;
      font-family: Arial, sans-serif;
      border: solid #963;
    }

    div#content p {
      margin: 0 1em 1em;
      padding: 0;
      line-height: 1.3;
    }

    h1 {
      margin: 0.5em -4px 0.5em;
      padding: 0.33em 0 0.167em;
      font: bold 200% sans-serif;
      vertical-align: middle;
      color: #024;
      letter-spacing: 0.5em;
      text-transform: lowercase;
    }

    dt {
      font-weight: bold;
    }

    dd {
      margin-bottom: 0.66em;
    }

    div#content a:link {
      color: blue;
    }

    div#content a:visited {
      color: purple;
    }

    div#content a:link:hover {
      color: red;
    }

    div#content a:visited:hover {
      color: maroon;
    }

    code,
    pre {
      color: #446;
      font-family: monospace;
    }

    code {
      font-size: 110%;
    }

    body {
      background: white url(https://meyerweb.com/eric/css/edge/complexspiral/glassy-bg.jpg) 0 0 no-repeat fixed;
    }

    div#content {
      background: white url(https://meyerweb.com/eric/css/edge/complexspiral/glassy-ripple.jpg) 0 0 no-repeat fixed;
    }

    div#content h1 {
      background: #CCC url(https://meyerweb.com/eric/css/edge/complexspiral/glassy-grag.jpg) 0 0 no-repeat fixed;
      border: 1px solid gray;
      padding: 0.5em 1em 0.25em;
    }

    div#content h2 {
      background: #CBB196 url(https://meyerweb.com/eric/css/edge/complexspiral/glassy-tan.jpg) 0 0 no-repeat fixed;
      color: white;
      padding: 0.5em;
      margin: 0 -12px 0.5em;
      border-color: #963;
      border-width: 1px 0;
      border-style: solid;
    }
    -->
  </style>
</head>

<body>

  <div id="content">
    <h1>complexspiral distorted</h1>
    <p>
      The page you are viewing right now exists to show off what can be accomplished with pure <a
        href="http://www.w3.org/TR/REC-CSS1">CSS1</a>, and that's all. This variant on <a
        href="http://www.meyerweb.com/eric/css/edge/complexspiral/demo.html">complexspiral</a> doesn't even use any CSS2
      to accomplish its magic. Remember: as you look this demo over, there is <em>no</em> Javascript here, nor are
      <em>any</em> PNGs being used, nor do I employ <em>any</em> proprietary extensions to CSS or any other language.
      It's all done using straight W3C-recommended markup and styling, all validated, plus a total of four (4) images.
    </p>
    <p>
      Unfortunately, not every browser supports all of CSS1, and only those browsers which fully and completely support
      CSS1 will get this right. Despite some claims to the contrary, IE6/Win's rendering of this page is
      <strong>not</strong> correct, as it (as well as some other browsers) doesn't correctly support
      <code>background-attachment: fixed</code> for any element other than the <code>body</code>. That makes it
      impossible to pull off the intended effect. Other browsers may or may not get the effect right.
    </p>

    <h2>Hands-on: Things to Examine</h2>
    <p>
      Before you start, make sure you're viewing this page in one of the browsers mentioned above. Otherwise the
      descriptions to follow won't match what you see.
    </p>
    <p>
      The first, easiest thing to do is scroll the page vertically. Make sure you scroll all the way to the very end of
      the page and back. Notice how the various areas with colored backgrounds also appear to distort the background
      image as if through mottled glass. Try changing the text size and notice how the compositing effect remains
      consistent. Then make your browser window really narrow and scroll horizontally. Again, everything should remain
      seamless and consistent.
    </p>
    <p>
      The demonstrated effect, that of having various elements backed with translucent rippled glass of varying hues, is
      only possible using fixed-attachment backgrounds in CSS. (Okay, maybe it could be done in Flash; I don't know.) I
      don't think it's even possible with IE's proprietary filters, but even if this effect is possible with filters, I
      could easily enough devise one that isn't.
    </p>

    <h2>I missed the original complexspiral demo-- how does this work?!?</h2>
    <p>
      Glad you asked. The effect demonstrated here is achieved by using fixed background images, nothing more. For
      example, the main-content area (the blue part here) uses the following styles for the default spiral-shell
      background:
    </p>
    <pre>
div#content {background: white url(glassy-ripple.jpg) 0 0 no-repeat fixed;}
</pre>
    <p>
      The above is equivalent to these styles:
    </p>
    <pre>
div#content { 
   background-color: white;
   background-image: url(glassy-ripple.jpg);
   background-position: 0 0;
   background-repeat: no-repeat;
   background-attachment: fixed;
   }
</pre>
    <p>
      The effect of these longer rules is exactly the same; they're just split out into individual background properties
      for more detailed consideration by you, gentle reader.
    </p>
    <p>
      First, check out the rippled-shell image found here: <a href="glassy-ripple.jpg">url(glassy-ripple.jpg)</a>. Then
      come back to this page and I'll continue with the explanation. All done? Great.
    </p>
    <p>
      According to CSS, any background image that is "fixed" using <code>background-attachment: fixed;</code> is fixed
      with respect to the <strong>viewport</strong>-- <em>not</em> the element with which the image is associated. So I
      set the rippled-shell background image to be aligned with the top left corner of the browser window (the viewport)
      with the values given for <code>background-position</code>. However, the image will only be visible wherever is
      intersects with the element to which it's been assigned. Therefore, even though the top left corner of the
      rippled-shell image is aligned with the top left corner of the viewport, we can only see it wherever it intersects
      with a <code>div</code> that has an <code>id</code> with a value of <code>content</code> (which, again, happens to
      be the one containing this text).
    </p>
    <p>
      So I set a fixed background for the <code>BODY</code>, the content <code>DIV</code>, and <code>H1</code> and
      <code>H2</code> elements scattered through the document. In any given case of an element's display, we see
      whatever part of the associated background image intersects with the element. The rest of the background image
      remains hidden.
    </p>
    <p>
      And <em>that's</em> how it works.
    </p>

    <h2>I'm not seeing the compositing!</h2>
    <p>
      Then I'm willing to bet that you're using Internet Explorer for Windows (any version), or possibly Opera (version
      6 or earlier). Neither of these browsers fully support <code>background-attachment: fixed</code> for elements
      other than <code>body</code>. In the case of both, images are fixed with respect to the elements that contain
      them, not the browser window, which is not what CSS1 defines <code>background-attachment: fixed</code> to mean,
      although browsers are allowed to ignore <code>fixed</code> if they stick to CSS1 (CSS2 requires its implementation
      for conformance). And yes, this page uses a strict DOCTYPE, so IE6 is in "<a
        href="http://msdn.microsoft.com/library/en-us/dnie60/html/cssenhancements.asp">strict mode</a>." I guess when <a
        href="http://www.microsoft.com/windows/ie/evaluation/features/default.asp#section5">Microsoft claims 100% CSS1
        compliance</a>, they're referring to the CSS1 core (a reduced subset of CSS1) instead of the entirety of the <a
        href="http://www.w3.org/TR/REC-CSS1">CSS1 specification</a>. It tends to make me wonder how limited or flawed
      their "full support" is for other key open specifications, like HTML and DOM.
    </p>

    <h2>Image credits</h2>
    <ul>
      <li>Nautilus shell: scanned by and copyright Eric A. Meyer
    </ul>

    <h4>Jump to</h4>
    <ul>
      <li><a>complex spiral (original)</a></li>
      <li><a>complex spiral (devolved)</a></li>
      <li><a>css/edge home</a></li>
    </ul>

  </div>

</body>

</html>

完美对齐背景 这个效果由几个非body元素固定粘附的背景图实现。整个示例只有一个HTML文档、 四个JPEG图像和一个样式表。四个背景图都放在浏览器窗口的左上角，而且仅在与元 素重合的地方才能看得到，叠加在一起便得到了半透明毛玻璃效果。

TanXinNiao commented 3 years ago

渐变

有两种新的图像类型完全由CSS实现：线性渐变和径向渐变。这两种渐变又各分为二： 循环渐变和不循环渐变。渐变最常在背景中使用，所以才在这里介绍。不过，渐变可以 用在任何可以使用图像的地方，例如list-style-image。

渐变指从一个颜色到另一个颜色的平滑过渡。例如，白色到黑色的渐变从白色开始，经 过一系列不同深度的灰色之后，最终变为黑色。渐变的平缓或骤变程度取决于渐变的作 用空间。如果在100像素的长度内由白色变为黑色，渐变累进的过程中每次变暗1%

在探讨渐变的过程中请谨记一点：渐变是图像。尽管渐变是通过CSS实现的，但每一点 都与SVG、PNG、GIF等图像一样。

渐变的特点是没有固有尺寸，因此，如果background-size属性的值为auto,渐变的尺 寸将是100%。如果没有为渐变背景声明background-size,其值将设为默认值auto,这 与声明100% 100%的作用相同。鉴于此，默认情况下，渐变背景填满整个背景定位区域。

线性渐变

ex01 (background-image:linear-gradient(purple, gold);}

ex02 (background-image:linear-gradient(90deg, purple, gold);}

ex03 (background-image:linear-gradient(to left, purple, gold);)}

ex04 (background-image:linear-gradient(-135deg, purple, gold, navy);}

ex05 (background-image: linear-gradient(to bottom left, purple, gold, navy);}

to top right就是这 个意思：指向图像的右上象限，而不是右上角。 梯度线的具体位置是这样确定的：

  1. 过图像的中点把声明的象限中的那个角两侧相邻的角连接起来。因此，对右上象限 来说，相邻的两个角是左上角和右下角。
  2. 梯度线与那条线垂直，指向声明的象限。
  3. 最后像往常那样构建渐变，即确定起点和终点、放置或排布色标，然后得出整个渐 变图像。
TanXinNiao commented 3 years ago

径向渐变

线性渐变能实现特别棒的效果，不过有时你可能想要圆形渐变，比如说实现聚光灯、圆 形阴影、圆形发光等效果。径向渐变的句法与线性渐变类似，不过也有一些区别： .radial {background-image: radial-gradient（purple, gold）;} 没有声明位置，因此使用默认的centero此外，由于没有声明形状，除方 形元素之外都是椭圆形，在方形元素中，形状为圆形。最后，因为没有声明色标或中色 点的位置，所以第一个色标放在梯度射线的开头，最后一个色标放在射线的末尾，二者 之间为线性混合。

是的，这里是梯度射线，其作用与线性渐变中的梯度线一样。梯度射线从渐变的中心向 右延伸，渐变的其他部分据此构建（稍后详细说明梯度射线）。 形状和尺寸 首先，径向渐变只有两种可用的形状值（因此也就只能有两种形状），即circle和 ellipse。径向渐变的形状可以显式声明，也可以由渐变图像的尺寸推导出来。

再看尺寸。一同往常，指定径向渐变的尺寸时可以只提供一个非负长度值（得到的是圆 形），也可以提供两个非负长度值（得到的是椭圆形）。假如有下述径向渐变： radial-gradient（50px, purple, gold） 这是个圆形径向渐变，由中心点处的紫色过渡到50像素以外的金色。如果再添加一个 长度值，得到的将是椭圆形渐变，宽度与第一个长度相等，高度与第二个长度相等： radial-gradient（50px 100px, purple, gold）

径向渐变的色标和梯度射线 径向渐变色标的句法和处理方式与线性渐变一样。仍以可能是最简单的径向渐变为例， 后面给出了明确声明的等效写法：


radial-gradient(purple 0%, gold 100%);```
径向渐变的梯度射线从中心向外延伸。在0%处(起点，也是渐变的中心点)，射线上 的颜色是紫色。在100%处(终点)，射线上的颜色是金色。在这两点之间，由紫色平 滑过渡到金色；超出终点后，颜色为纯金色。

如果在紫色和金色之间添加一个色标，但不指定它的位置，那么新增的色标将放在起点 和终点的中间，颜色的过渡也将相应改变
```adial-gradient(100px circle at center, purple 0%, green, gold 100%);```
如果写成green 50%,得到的结果是一样的。我想你应该明白了。梯度射线上的颜色由 紫色到绿色再到金色平滑过渡，超过射线终点后为纯金色。
TanXinNiao commented 3 years ago

处理渐变图像

前文不断强调，渐变是图像。这意味着可以使用不同的背景属性设定渐变的尺寸、位置、 重复方式等，就跟处理PNG或SVG图像一样。 利用这一点可以实现简单的重复渐变(复杂的重复方式在下一节讨论)。例如，可以使 用急停的径向渐变实现点状背景

body {
    background: tan center/25px 25px repeat radial-gradient(circle at center, rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.1) 10px,
        transparent 10px, transparent);
  }

是的，这与平铺一个几乎透明的直径为10像素的深色圆形PNG图像得到的结果相当。 不过，使用渐变有三点优势： •基本可以肯定的是，CSS所占的字节比PNG图像小。 • 更为重要的是，PNG图像要额外请求服务器。这会拖慢页面的加载时间，降低服务 器的性能。CSS渐变就在样式表中，无需额外请求服务器。 •修改渐变简单得多，因此你可以不断试验，直到找出合适的尺寸、形状和明暗程度。

这个幕布效果由三个线性渐变实现，其中两个渐变以不同的间隔重复，另一个沿背景的 底部创建“发光”效果。所用的代码如下：

.hello {
    background-image: linear-gradient(0deg, rgba(255, 128, 128, 0.25), transparent 75%),
      linear-gradient(89deg, transparent, transparent 30%,
        #510A0E 35%, #510A0E 40%, #61100F 43%, #B93F3A 50%,
        #480408 55%, #6A0F18 60%, #651015 65%,
        #510A0E 70%, #510A0E 75%, rgba(255, 128, 128, 0) 80%, transparent),
      linear-gradient(92deg,
        #510A0E, #510A0E 20%, #61100F 25%, #B93F3A 40%, #460408 50%, #6A0F18 70%, #651015 80%, #510A0E 90%, #510A0E);
    background-size: auto, 300px 100%, 109px 100%;
    background-repeat: repeat-x;
  }

第一个渐变（最上层那个）从75%透明的浅红色过渡到梯度线上75%处的完全透明。 然后创建两个“褶皱”图像，如图9・100所示。

这些渐变图像沿X轴重复，而且都指定了尺寸。第一个渐变实现“发光”效果，尺寸设 为auto,以便覆盖元素的整个背景。第二个渐变的宽度设为300px,高度设为100%,因 此，渐变图像将与元素的背景区域等高，宽度则为300像素。这意味着，在X轴上，这 个渐变每300像素出现一次。第三个斷变图像也是如此，每109像素出现一次。最终得 到的结果是一个不平整的舞台幕布。

TanXinNiao commented 3 years ago

循环渐变

渐变是很强大，但由于渐变是图像，平铺时可能会遇到一些奇怪的行为。例如，如果声 明下述样式：

hl.exmpl (background: linear-gradient(-45deg, black 0, black 25px, yellow 25px, yellow 50px) top left/40px 40px repeat;}

可以看出，重复的图像是不连续的。为了让相应的边对齐，你可以精确计 算元素和渐变图像的尺寸，然后调整构建渐变的各要素，但是，如果有一种简单的方式 能声明“始终无缝重复”，那该多好。

这时循环渐变就派上用场了。对上述示例来说，我们只需把1 inear-gradient换成 repeating-linear-gradient,并去掉 background-size 值，其他都保持不变。

h1.exmpl (background: repeating-linear-gradient(-45deg,
black 0, black 25px, yellow 25px, yellow 50px) top left;}

把其中一个色标换成中色点的位置也可以实现上述效果，如下所示： h1.exmpl {background: repeating-linear-gradient(-45degj black 0, black 25px, 25px, yellow 50px) top left;} 循环线性渐变在梯度线上不断循环排布声明的色标和中色点。对上例来说，每25像素 将出现一次黑黄条纹。 注意，最后一个色标明确指定了长度(50px)。循环渐变必须这么做，最后一个色标的 长度值用于定义图案的整体长度。

以上示例中的颜色是急停的。如果使用平滑过渡，一定要小心，最后一个色标的颜色值 必须与第一个色标的颜色值一致。以下述渐变为例： repeating-linear-gradient(-45degj purple 0px, gold 50px) 这个渐变由紫色平滑过渡到50像素处的金色，然后立即变成紫色，再平滑过渡到下一 个50像素处的金色。若想避免这种情况，要再添加一个色标，而且必须与第一个色标 的颜色相同。下面的渐变与前述渐变的比较如图9-103所示： repeating-linear-gradient(-45deg, purple Opx, gold 50px, purple 100px)

你可能注意到了，目前看到的循环渐变都没有定义尺寸。因此，渐变图像将填满元素的 整个背景定位区域，这是无固有高度和宽度的图像的默认行为。如果使用background-size 属性设定了循环渐变图像的尺寸，渐变只在渐变图像范围内可见。如果再使用 background-repeat属性设定重复，又会变成在背景中不间断重复的情况，如图9-104 所示：

hl.exmpl (background:
repeating-linear-gradient(-45deg, purple Opx, gold 50px, purple100px) top left/50px 50px repeat;}

如果在重复线性渐变中使用百分数值，各色标的位置就像没有重复时一样。因此，你将 看到声明的色标创建的渐变，但是没有重复。所以，百分数值在重复线性渐变中没有任 何意义。 不过，百分数值在循环径向渐变中却十分有用。定义好圆形或椭圆形的尺寸之后，再使 用百分数定义色标在梯度射线上的位置，超出梯度射线末端后，便能看到循环渐变。以 下述渐变为例：

.allhail (background:
repeating-radial-gradient(lOOpx 50px, purple, gold 20%, green 40%,
purple 60%, yellow 80%, purple);)

这里，各色标之间相距20像素，对应的颜色在得到的图案中不断循环。因为第一个色 标和最后一个色标的颜色值相同，因此颜色不会立即变化。这个波纹将一直向外扩散， 直到渐变图像的边缘

你可以想象一下循环的彩虹径向渐变是什么样子的:

.wdim {background:
repeating-radial-gradient( lOOpx circle at bottom center, rgb(83%,83%,83%) 50%, violet 55%, indigo 60%, blue 65%, green 70%, yellow 75%, orange 80%, red 85%, rgb(47%,60%,73%) 90%
)；}

创建循环径向渐变时要注意几点： • 如果不为径向渐变声明尺寸，默认为椭圆形，而且宽高比与渐变图像相同。如果不 使用background-size属性为渐变图像声明尺寸，默认为目标元素背景区域的尺寸 （若是生成列表的项目符号，默认尺寸为浏览器预设的值）。 • 默认的径向渐变尺寸为farthest-corner,即把梯度射线的终点放在右侧足够远的地 方，让椭圆与径向图像上离径向渐变中心点最远的那一角相交。

TanXinNiao commented 3 years ago

盒子投影

box-shadow #box {background: silver; border: medium solid; box-shadow: 10px 10px rgba(0,0,0,0.5)；} 前面定义的盒子投影设定了两个长度值。第一个定义横向偏移，第二个定义纵向偏移。 正数把投影向下和向右移动，负数把投影向上和向左移动。 如果提供第三个值，定义的是模糊距离，即指定给模糊留出多少空间。第四个值定义展 开距离，这会改变投影的尺寸。正值在模糊之前延伸投影，负值使投影变小。