css条纹背景

码农六六

已于 2022-07-26 09:58:36 修改

阅读量459

点赞数

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

于 2022-07-25 19:19:46 首次发布

本文链接：https://blog.csdn.net/six6de6/article/details/125981143

版权

html+css3 专栏收录该内容

20 篇文章 1 订阅

订阅专栏

1.假设我们有一条基本的垂直线性渐变，颜色从 #fb3 过渡到 #58a

实现效果：

代码段：

<!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(#fb3,#58a);
}
    </style>
</head>
<body>
    <div>

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

2.现在我们试着把这两个色标拉近一点

效果展示：

代码段：

    background:linear-gradient(#fb3 20%,#58a 80%);

3.现在容器顶部的20%的区域被填充为#fb3实色，而底部20%区域被填充为#58a实色，真正色渐变只出现容器60%的高度区域，如果两个色标继续拉近一些（分别为40%和60%）

   background:linear-gradient(#fb3 40%,#58a 60%);

4.如果两个色标重合在一起呢（分别为50%和50%）

   background:linear-gradient(#fb3 50%,#58a 50%);

从上面可以看到已经没有了渐变效果，事实上我们已经创建了两条巨大的水平条纹。

5.因为渐变是由代码生成的图像，我们能像对待其他的任何背景像那样对待它，而且还可以通过background-image 来调整其尺寸

效果展示：

代码段：

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

6.我们还可以用相同的方法创建不同宽度的条纹，只需要调整色标位置值即可

效果展示：

代码段：

    background:linear-gradient(#fb3 30%,#58a 30%);
    background-size: 100% 30px;

7.为了避免每次改动条纹的宽度时都要修改两个数字，我们可以再次从规范哪里找到捷径

如果某个色标的位置值比整个列表中在它之前的色标的位置值都要小，则该色标的位置值会被设置为它前面所偶有色标位置值的最大值

这意味着我们把第二个色标的位置值设置为0，那么它的位置值就总会被浏览器调整为前一个色标的位置值，

效果展示：

代码段：

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

8.如果要创建超过两种颜色的条纹、

实现效果

代码段：

   background:linear-gradient(#fb3 33.3%,#58a 0,#58a 66.6%,green 0);
    background-size: 100% 30px;

码农六六

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
css条纹背景

条纹背景的实现-下期分享其他样式的条纹背景
复制链接

扫一扫

专栏目录

css条纹背景

实现效果：

代码段：

效果展示：

代码段：

效果展示：

代码段：

效果展示：

代码段：

效果展示 ：

代码段：

实现效果

代码段 ：

“相关推荐”对你有帮助么？

效果展示：

代码段：