条纹背景，垂直条纹，斜向条纹，灵活的背景条纹

最新推荐文章于 2023-07-24 22:24:42 发布

贾宝玉单臂擒方腊

最新推荐文章于 2023-07-24 22:24:42 发布

阅读量491

点赞数 1

分类专栏： html+css3 文章标签： html css 前端

本文链接：https://blog.youkuaiyun.com/six6de6/article/details/126021172

版权

html+css3 专栏收录该内容

20 篇文章

订阅专栏

一：垂直条纹

二：斜向条纹

三：灵活的背景条纹

一：垂直条纹

垂直条纹的代码跟水平条纹几乎是一样的，差别在于：我们需要在开头加上一个额外的参数来指定渐变的方向。默认情况下是 to buttom

效果展示：

代码段：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>条纹背景</title>、
    <style>
div{
    height: 200px;
    width: 500px;
    background:linear-gradient(to right,/*或者90deg*/ #fb3 50%,#58a 0) ;
    background-size: 30px 100%;
}
    </style>
</head>
<body>
    <div>

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

二：斜向条纹

在完成垂直条纹后，我们可以想到我们改变background-size的值和渐变的方向，就可以得到倾斜的条纹

效果展示：

代码段：

    background:linear-gradient(45deg, #fb3 50%,#58a 0) ;
    background-size: 30px 30px;

可以看到这个方法是行不通的，原因是我们只是把每个“贴片”内部的渐变旋转了45°，而不是把整个背景都旋转了，只要把每个贴片包含四条条纹，就可能做到无缝衔接

效果展示：

代码段：

 div {
            height: 200px;
            width: 500px;
            background: linear-gradient(45deg,
                    #fb3 25%, #58a 0,
                    #58a 50%, #fb3 0,
                    #fb3 75%, #58a 0);
            background-size: 30px 30px;
        }

我们可以在上图中看到结果。如你所见，我们成功地创建了斜向条纹,但这些条纹看起来要比我们在前面制作的水平和垂直条纹细一些。为了理解这其中的道理，我们需要再次回忆起在学校里学过的勾股定理，用它来计算直角三角形的斜边长度。这个定理表示，当a和b是直角三角形的直角边时,则斜边的长度等于√a+b2。对于一个 45°的直角三角形来说，它的两条直角边是等长的，因此这个算式会变成√2a =av2。在我们的斜向条纹中，背景尺寸指定的长度值决定了直角三角形的斜边长度，但条纹的宽度实际上是直角三角形的高。在下图中可以看到图形化的解释。
这意味着，如果想让条纹的宽度变化为我们原本想要的15px，就需要把background-size指定为2×15√2 ～ 42.426 406 871像素:

你可以在上图中看到最终效果。但是，除非有人拿枪顶着你的脑袋威胁你必须把斜向条纹的宽度设置为完全精确的15像素，我会强烈推荐你把这一长串数字取整，写成42.4px，或者甚至是42px。（当然，在上述情形之下，你还是会被干掉。因为√2 不是整数，我们最终得到的条纹宽度永远都只能是一个；近似值——尽管它已经相当精确了。）

三：更好的斜向条纹

在前面的展示方法还不够灵活，假设我们想让条纹不是45°而是60°怎么办?或者是30°?又或者是3.141 5926535°? 如果我们只是把渐变的角度改一下，那么结果看起来会相当糟糕。(比如在下图中，我们尝试实现60°条纹,但以失败告终。）
幸运的是，我们还有更好的方法来创建斜向条纹。一个鲜为人知的真相是linear-gradient()和radial-gradient()还各有一个循环式的加强版:repeating-linear-gradient()和 repeating-radial-gradient()。它们的工作方式跟前两者类似，只有一点不同:色标是无限循环重复的，直到填满整个背景。下面是一个重复渐变的例子:

60°例子

重复渐变

代码段

background: repeating-linear-gradient(45deg,
                    #fb3, #58a 30px);

重复线性渐变完美适用于——你已经猜到了吧——条纹效果!这得益于它们可以无限循环的天赋，一个渐变图案就可自动重复并铺满整个背景。因此,我们再也不需要去操心如何创建出可以无缝拼接的贴片了。
作个对比,我之前创建的效果也可以由这个重复渐变来生成:

效果展示

代码段

 background: repeating-linear-gradient(45deg,
                    #fb3, #fb3 15px, #58a 0, #58a 30px);

下面换成60°

 background: repeating-linear-gradient(60deg,
                    #fb3, #fb3 15px, #58a 0, #58a 30px);

灵活的同色系条纹：

在大多数情况下,我们想要的条纹图案并不是由关异极大的几种颜色组成的，这些颜色往往属于同一色系，只是在明度方面有着轻微的差异。举个例子,我们来看看这个条纹图案:

效果展示：

代码段：

  background: repeating-linear-gradient(30deg,
                    #79b, #79b 15px, #58a 0, #58a 30px);

在上图中可以看到,条纹是由一个主色调变体所组成的。但是，这两种颜色之间的关系在代码中并没有体现出来。此#58a）和它的浅色外，如果我们想要改变这个条纹的主色调，甚至需要修改四处!幸运的是，还有一种更好的方法:不再为每种条纹单独指定颜色，而是把最深的颜色指定为背景色，同时把半透明白色的条纹叠加在背景色之上来得到浅色条纹:

显示效果：

代码段：

 background: #58a;
            background-image: repeating-linear-gradient(30deg,
                    hsla(0, 0%, 100%, .1), hsla(0, 0%, 100%, .1) 15px,
                    transparent 0, transparent 30px);

结果看起来跟前是一模一样的，但我们现在只需要修改一个地方就可以改变所有颜色了。我们还得到了一个额外的好处，对于那些不支持CSS 渐变的浏览器来说，这里的背景色还起到了回退的作用。不仅如此，在下一篇攻略中我们还将看到，通过叠加的手法，具有透明区域的多个渐变图案可以构造出非常复杂的图案。