【css】linear-gradient()

最新推荐文章于 2024-04-20 20:01:08 发布
最新推荐文章于 2024-04-20 20:01:08 发布
阅读量1.1k 收藏 6
点赞数 1
分类专栏： css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qzw752890913/article/details/108063788
版权

文章目录

linear-gradient()

linear-gradient，创建两种或多种颜色线性渐变的图片。

<body>
    <div class="box"></div>
</body>

div{
    width: 100px;
    height: 100px;
}
.box{
    background-image: linear-gradient(gold,blue);
}

在这里插入图片描述

在这里插入图片描述

横条纹
两种颜色
<body>
    <div class="box"></div>
</body>

div{
    width: 100px;
    height: 100px;
}
.box{
    background-color:lightskyblue;
    background-image: linear-gradient(gold 50%, blue 0);
    background-size:100% 50%;
    background-repeat:repeat;
}

在这里插入图片描述

三种颜色
<body>
    <div class="box"></div>
</body>

div{
    width: 100px;
    height: 100px;
}
.box{
    background-image: linear-gradient(gold 33.33%, 
                                    blue 0, blue 66.66%,
                                    tomato 0);
    /* background-image: linear-gradient(gold 0%, gold 33.33%,
                                        blue 33.33%,blue 66.66%,
                                        tomato 66.66%,tomato 100%); */
    background-size:100% 50%;
    background-repeat: repeat;
}

在这里插入图片描述

竖条纹
两种颜色
<body>
    <div class="box"></div>
</body>

div{
    width: 100px;
    height: 100px;
}
.box{
    background-image: linear-gradient(to right, gold 50%,blue 0);
    background-size:50% 100%;
    background-repeat: repeat;
}

在这里插入图片描述

三种颜色
<body>
    <div class="box"></div>
</body>

div{
    width: 100px;
    height: 100px;
}
.box{
    background-image: linear-gradient(to right,gold 33.33%,
                                        blue 0,blue 66.66%,
                                        tomato 0);                      
    background-size:50% 100%;
    background-repeat: repeat;
}

在这里插入图片描述

斜条纹
两种颜色
<body>
    <div class="box"></div>
</body>

div{
    width: 100px;
    height: 100px;
}
.box{
    background-image: linear-gradient(to right top,gold 25%,
                                                    blue 0, blue 50%,
                                                    gold 0, gold 75%,
                                                    blue 0);
    background-size:20px 20px;
    background-repeat: repeat;
}

在这里插入图片描述
在这里插入图片描述

repeating-linear-gradient()
<body>
    <div class="box"></div>
</body>

div{
    width: 100px;
    height: 100px;
}
.box{
    background-image: repeating-linear-gradient( to right top,
                                                gold 0, gold 10px,
                                                blue 0, blue 20px);
}

在这里插入图片描述

同色系条纹

深色作为背景色，背景色+半透明即可得浅色。

<body>
    <div class="box"></div>
</body>

div{
    width: 100px;
    height: 100px;
}
.box{
    background-color: darkorange;
    background-image: repeating-linear-gradient(45deg,
                            transparent,transparent 10px,
                          hsla(0,0%,100%,.2) 0,hsla(0,0%,100%,.2) 20px);                    
}

在这里插入图片描述

方形网格
<body>
    <div class="box"></div>
</body>

div{
    width: 110px;
    height: 110px;
    margin: 20px;
}
/* 
.box{
    background-color: white;
    background-image: linear-gradient(hsla(0,80%,50%,.5) 50%,transparent 0);
} 
*/

/*
.box{
    background-color:white;
    background-image: linear-gradient(90deg,hsla(0,80%,50%,.5) 50%,transparent 0);
}
*/

/*
.box{
    background-color: white;
    background-image: repeating-linear-gradient(hsla(0,80%,50%,.5),hsla(0,80%,50%,.5) 10px,
                                                    transparent 0,transparent 20px);
}
*/

/*
.box{
    background-color: white;
    background-image:repeating-linear-gradient(90deg, hsla(0,80%,50%,.5),hsla(0,80%,50%,.5) 10px,
                                                transparent 0,transparent 20px);
}
*/

.box{
    background-color: white;
    background-image: repeating-linear-gradient(hsla(0,80%,50%,.5),hsla(0,80%,50%,.5) 10px,
                                                    transparent 0,transparent 20px),
                      repeating-linear-gradient(90deg, hsla(0,80%,50%,.5),hsla(0,80%,50%,.5) 10px,
                                                transparent 0,transparent 20px);

}

在这里插入图片描述

div{
    width: 100px;
    height: 100px;
    margin: 20px;
}
/*
.box{
    background-color: lightskyblue;
    background-image:linear-gradient(white 2px, transparent 0);
    background-size: 50px 50px;
}
*/

/*
.box{
    background-color: lightskyblue;
    background-image: linear-gradient(90deg,white 2px,transparent 0);
    background-size: 50px 50px;
}
*/

/*
.box{
    background-color: lightskyblue;
    background-image: linear-gradient(white 1px,transparent 0);
    background-size: 10px 10px;
}
*/

/*
.box{
    background-color: lightskyblue;
    background-image: linear-gradient(90deg,white 1px,transparent 0);
    background-size: 10px 10px;
}
*/

/*
.box{
    background-color: lightskyblue;
    background-image:linear-gradient(white 2px, transparent 0),
                        linear-gradient(90deg,white 2px,transparent 0);
    background-size: 50px 50px;    
}
*/

/*
.box{
    background-color: lightskyblue;
    background-image: linear-gradient(white 1px,transparent 0),
                    linear-gradient(90deg,white 1px,transparent 0);
    background-size: 10px 10px;
}
*/
.box{
    background-color: lightskyblue;
    background-image: 
                    linear-gradient(white 2px, transparent 0),
                    linear-gradient(90deg,white 2px,transparent 0),
                    linear-gradient(white 1px,transparent 0),
                    linear-gradient(90deg,white 1px,transparent 0);
    background-size: 
                    50px 50px,
                    50px 50px,
                    10px 10px,
                    10px 10px;  
}

在这里插入图片描述

棋盘
<body>
    <div class="box"></div>
</body>

/* 
.box{
    width: 100px;
    height: 100px;
    background-image: linear-gradient(45deg,#bbb 50%,transparent 0);
} 
*/

/*         
.box{
    width: 100px;
    height: 100px;
    background-image: linear-gradient(45deg,#bbb 25%,transparent 0);
} 
*/

/* 
.box{
    width: 100px;
    height: 100px;
    background-image: linear-gradient(45deg,#bbb 25%,transparent 0);
    background-size: 50px 50px;
} 
*/

/* 
.box{
    width: 100px;
    height: 100px;
    background-image: linear-gradient(45deg,transparent 75%,#bbb 0);
    background-size:50px 50px;
} 
*/

/* 
.box{
    width: 100px;
    height: 100px;
    background-image: linear-gradient(45deg,#bbb 25%,transparent 0),
                        linear-gradient(45deg,transparent 75%,#bbb 0);
    background-size: 50px 50px;
} 
*/

/* 
.box{
    width: 100px;
    height: 100px;
    background-image: linear-gradient(45deg,#bbb 25%,transparent 0),
                        linear-gradient(45deg,transparent 75%,#bbb 0);
    background-size: 50px 50px;
    background-position: 25px 25px;
} 
*/

.box{
    width: 100px;
    height: 100px;
    background-image: linear-gradient(45deg,#bbb 25%,transparent 0),
                        linear-gradient(45deg,transparent 75%,#bbb 0),
                        linear-gradient(45deg,#bbb 25%,transparent 0),
                        linear-gradient(45deg,transparent 75%,#bbb 0);
    background-size: 50px 50px;
    background-position: 0 0, 
                        0 0,
                        25px 25px,
                        25px 25px;
}

.box{
    width: 100px;
    height: 100px;
    background-image: linear-gradient(45deg,#bbb 25%,transparent 0,transparent 75%,#bbb 0),
                        linear-gradient(45deg,#bbb 25%,transparent 0,transparent 75%,#bbb 0);
    background-size: 50px 50px;
    background-position: 0 0, 25px 25px;
}

在这里插入图片描述

@mixin board($size,$color){
    background-image: linear-gradient(45deg,$color 25%,transparent 0,transparent 75%,$color 0),
                        linear-gradient(45deg,$color 25%,transparent 0,transparent 75%,$color 0);
    background-size: $size $size;
    background-position: 0 0, $size/2 $size/2;
}
.box{
    width: 100px;
    height: 100px;
    @include board(50px,#bbb);
}
信封
<body>
    <div class="box"></div>
</body>

.box{
    width: 100px;
    height: 100px;
    /* background-image: linear-gradient(-45deg,white, white 12.5%,
                                           red 0,red 25%,
                                           white 0,white 37.5%,
                                           blue 0,blue 50%,
                                           white 0,white 62.5%,
                                           red 0, red 75%,
                                           white 0,white 87.5%,
                                           blue 0,blue 100%    
                                            ); */
    background-image: repeating-linear-gradient(-45deg,white 0,white 12.5%,
                                                        red 0,red 25%,
                                                        white 0,white 37.5%,
                                                        blue 0,blue 50%);
                        
}

在这里插入图片描述
多个linear-gradient时，注意优先级，排在前面的优先级高，因此会覆盖后面的。
举例来讲，

.box{
    width: 100px;
    height: 100px;
    background-image:repeating-linear-gradient(-45deg,transparent 0,transparent 12.5%,
                                                        red 0,red 25%,
                                                        transparent 0,transparent 37.5%,
                                                        blue 0,blue 50%),
                    linear-gradient(white,white);
}

在这里插入图片描述

.box{
    width: 16em;
    height: 8em;
    border: 1em solid transparent;
    background-image:linear-gradient(white,white),
                    repeating-linear-gradient(-45deg,transparent 0,transparent 12.5%,
                                                        red 0,red 25%,
                                                        transparent 0,transparent 37.5%,
                                                        blue 0,blue 50%);
    background-size: 4em 4em;
    /* background-size: 4em ; */
    background-clip: padding-box,border-box;                                                         
}

在这里插入图片描述
background-size:4m 4m;不等效于background-size:4em。
background-size只有一个值时，该值将作为宽度值，但高度值将被设定为auto；
background-size有两个值时，第一个值作为宽度值，第二个值作为高度值。
信封样式的实现和另外两个特性有关：background-clip和background-origin。
background-clip决定了背景颜色，即background-color的作用范围，其默认值是border-box，这意味着背景颜色将从元素内容区域延伸至边框。
background-origin决定了背景图像的左上角的放置位置，其默认值是padding-box，即背景图像默认从padding-box的左上角开始平铺展开。了解更多，到这里。

蚂蚁行军线

在这里插入图片描述


.box{
    width: 16em;
    height: 8em;
    border: 1px solid transparent;
    background-image:linear-gradient(white,white),
                    repeating-linear-gradient(-45deg,transparent 0,transparent 12.5%,
                                                        black 0,black 25%);
    background-size: 1em 1em;
    background-clip: padding-box,border-box;          
    animation:ants 12s linear infinite;                                         
}
@keyframes ants{
    to{
        background-position:100%;
    }
}

在这里插入图片描述

动画怎么来的？看下面这个更好理解。

.box{
    width: 16em;
    height: 8em;
    border: 1em solid transparent;
    background-image: repeating-linear-gradient(-45deg,transparent 0,transparent 12.5%,
                                                        red 0,red 25%,
                                                        transparent 0,transparent 37.5%,
                                                        blue 0,blue 50%);
    background-size: 4em 4em;
    background-clip: padding-box,border-box;    
    animation:ants 12s linear infinite;                                                     
}
@keyframes ants{
    to{
        background-position:100%;
    }
}

在这里插入图片描述
当然，重点还是要理解background-position，可到这里看看。

richest_qi
关注
  • 1
    点赞
  • 踩
  • 6
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
深入剖析CSS中的线性渐变linear-gradient
09-24
在CSS中，线性渐变可以通过`linear-gradient`函数来创建。 **语法** ```css linear-gradient([ [ <angle> | to <side-or-corner> ] ,]? <color-stop>[, <color-stop>]+) ``` 其中，`<angle>`用于指定渐变线的角度，...
重复线性渐变repeating-linear-gradient
jenreal的博客
06-17 6238
上一篇CSS3 线性渐变（linear-gradient）讲了CSS3线性渐变，本文是它的姐妹篇——重复线性渐变repeating-linear-gradient。 repeating-linear-gradient()函数创建一个由重复线性渐变组成的 。它类似于linear-gradient() 并采取相同的参数，但它重复的颜色停止无限的所有方向， 以覆盖其整个容器。函数的结果是 数据类型的一个对象， 它是一种特殊的 。 一、语法结构 repeating-linear-gradient( [ <
linear-gradient()图像渐变属性详解
sunsineq的专栏
03-05 8775
对于linear-gradient()我学习的时候，查了很多资料，但是发现不管是网上还是一些书籍，都没有将这个属性的运用讲得明白，清楚，对此，我写了这篇博客，虽然不能保证每一位读者都能够看懂，但是也希望这篇博客能为你提供一些帮助，如有问题，请在博客中提出，谢谢。 首先给大家讲的就是兼容性，在IE浏览器中这个属性的设置是不兼容的，当然在IE浏览器中也可以实现类似的效果，那边是滤镜(fliter)的作用了.其他的不同的浏览器也是有不同的，比如chrome一般要加-webkit-前缀，如：-webkit-lin
渐变效果-gradient（秒懂网页中的渐变效果）
最新发布
百赢出品，必属精品
04-20 1239
CSS渐变是指在HTML元素上应用的平滑过渡效果，通常用于创建颜色或透明度上的渐变。渐变可以是线性的（沿着一条直线方向）、径向的（从一个中心点向外辐射）、角向的（沿着角度方向）、重复的等等。渐变是一种在CSS中用于创建平滑过渡效果的技术，通过在不同颜色之间进行过渡，可以实现丰富多彩的背景、文本和边框效果。线性渐变（linear-gradient）通过定义渐变的方向和颜色起止点，实现沿着一条直线方向的颜色过渡效果。可以指定角度、方向关键字（top、right、bottom、left）或者自定义方向。
linear-gradient参数学习与使用
Bekind2010的专栏
04-20 1万+
inear-gradient() 函数用于创建一个表示两种或多种颜色线性渐变的图片。创建一个线性渐变，需要指定两种颜色，还可以实现不同方向（指定为一个角度）的渐变效果，如果不指定方向，默认从上到下渐变。
CSS 的 linear-gradient() 线性渐变函数（带例子）
热门推荐
单枪匹码
11-14 2万+
一、CSS中的 linear-gradient() 函数： 1、定义与用法：（取自菜鸟教程） linear-gradient() 函数用于创建一个线性渐变的" 图像 "。 为了创建一个线性渐变，你需要设置一个起始点和一个方向（指定为一个角度）的渐变效果。你还要定义终止色。终止色就是你想让Gecko去平滑的度过，并且你必须指定至少两种，当然也会可以指定更多的颜色去创建更复杂的渐变效果。 2、实例：以...
CSS小技巧---线性渐变linear-gradient/径向渐变radial-gradient
勤学daydayup的博客
07-18 2万+
本文主要介绍linear-gradient一些不太一样的玩法 普通渐变 -最常见的用法是从字面意思理解，实现一个渐变背景，如下图效果 background: linear-gradient(to right, #30e8bf, #ff8235); 无渐变，突变效果 调整色标位置，实现两个非渐变效果 background: linear-gradient(to right, #30e8bf 50%, #ff8235 50%); 参数解释，颜色后面跟一个百分比，表示当前颜色的过渡位置，如果前后两个颜色的过.
CSS3样式linear-gradient的使用实例
09-27
【CSS3样式linear-gradient详解与应用实例】 CSS3中的`linear-gradient`是一个强大的工具，用于创建线性颜色渐变背景，它可以替代以往复杂的背景图片，实现更为灵活且响应式的网页设计。本文将深入探讨`linear-...
利用CSS3的线性渐变linear-gradient制作边框的示例
09-24
在CSS3中，`linear-gradient`是一个强大的工具，可以用于创建动态、丰富的背景效果，而不仅仅是填充色块。在这个示例中，我们将深入探讨如何利用`linear-gradient`来制作边框，以及如何通过调整参数来实现不同的边框...
CSS学习笔记之可重复渐变（repeating-linear-gradient）
09-27
在CSS中，`repeating-linear-gradient`是一种创建可重复线性渐变的工具，它可以将一个简单的线性渐变在指定方向上无限重复，从而产生各种有趣的视觉效果，如条纹、格子或其他图案。这个功能对于网页设计，尤其是创建...
深入理解Css linear-gradient线性渐变
q1003675852的博客
12-08 1841
本文主要介绍了css的linear-gradient线性渐变的相关概念和原理，涉及渐变线（梯度线）、起止点、方向等，线性渐变相关语法的使用及示例。
CSS实验：linear-gradient 详解及实践
Eighteen Z
11-16 1万+
文章目录前言一、 介绍示例小结二、场景用法1. 四角边框背景2.读入数据总结 前言 本文想要介绍一些linear-gradient的更多实用性比较强的用法，前面有根据CSS揭秘总结的讲线性渐变实现条纹背景的方法。 CSS揭秘：5.条纹背景（上） 一、 介绍 示例 background: linear-gradient(red, yellow, blue); background: linear-gradient(red 0%, yellow 50%, blue 100%); back
CSS如何设置自定义渐变色? 线性渐变篇
Meta.Qing的博客
08-25 2783
如果你想对渐变的方向有更多的控制，你可以定义一个角度，而不是预定义的方向(向下，上，向右，向左，向右，等等)。rgba()函数中的最后一个参数可以是0到1之间的值，它定义了颜色的透明度:0表示完全透明，1表示完全透明(不透明)。要创建线性渐变，您必须定义至少两个颜色停止。下面的示例显示了从左上角开始(到右下角)的线性渐变。下面的例子显示了一个从左侧开始的线性渐变。下面的例子显示了一个从顶部开始的线性渐变。下面的例子显示了一个从左侧开始的线性渐变。CSS渐变可以让你在两个或多个指定颜色之间显示平滑的过渡。
Linear-gradient()
broken_promise的博客
06-19 693
Linear 你好！ 这是你第一次使用 Markdown编辑器 所展示的欢迎页。如果你想学习如何使用Markdown编辑器, 可以仔细阅读这篇文章，了解一下Markdown的基本语法知识。 新的改变 我们对Markdown编辑器进行了一些功能拓展与语法支持，除了标准的Markdown编辑器功能，我们增加了如下几点新功能，帮助你用它写博客： 全新的界面设计 ，将会带来全新的写作体验； 在创作中心设置你喜爱的代码高亮样式，Markdown 将代码片显示选择的高亮样式 进行展示； 增加了 图片拖拽 功能，你可以
repeating 路由_CSS中带有示例的repeating-linear-gradient（）函数
cumudi0723的博客
06-26 377
repeating 路由Introduction: 介绍： So far, we have learned so many functions but learning never gets enough, therefore as a good developer, we must learn as many functions as we can and know their behavi...
CSS 奇思妙想 | Single Div 绘图技巧
ting2909的博客
06-03 210
Wow，其实这里，我们只需要元素本身实现正方形，元素的两个伪元素利用绝对定位实现两个圆形，叠加在一起即可！完整的代码也非常简单： div { position: relative; transform: rotate(45deg); background: rgba(255, 20, 147, 0.85); width: 140px; height: 140px; } div::before, div::after { content: “”; position: absolute; top: 0; lef
【css | linear-gradient】linear-gradient()的用法
趟过java，遇见web
09-11 521
linear-gradient() CSS函数创建一个由两种或多种颜色沿一条直线进行线性过渡的图像,其结果是数据类型的对象,此对象是一种特殊的 数据类型。关键词的先后顺序无影响。如果没有指定，则默认为。渐变线的起始点位置。和两个关键字：一个指定水平位置（，增加值相当于顺时针旋转。），另一个指定竖直位置（其余值会被转换为角度。渐变线的方向的角度。商品的热卖标签
【CSS3】渐变、过渡和动画用法
qq_45677671的博客
12-30 3150
css 渐变、过渡、动画属性解析及使用方法和案例
CSS之linear-gradient( ) 函数—背景颜色渐变设计
夏日漱石的博客
10-04 1571
CSS之linear-gradient( ) 函数—背景颜色渐变设计
css linear-gradient用法
08-18
CSS linear-gradient函数用于创建一个线性渐变的背景图像。这个函数可以接受多个颜色值作为参数，每个颜色值定义了渐变的一个色标点。渐变的方向由起点和终点决定。 示例用法： background-image: linear-gradient...

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

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值