关于 background-image 渐变gradient()那些事

已于 2024-11-13 16:37:38 修改
阅读量2.3k 收藏 60
点赞数 57
文章标签： css3 css html5
于 2021-11-15 07:00:00 首次发布
原创文章，禁止任何形式转载！
本文链接：https://blog.csdn.net/shangyanaf/article/details/120973029
版权
本文详细介绍了CSS3中的background-image属性，特别是渐变类型，包括linear-gradient()的用法、示例和多颜色设置，radial-gradient()的径向渐变效果，以及conic-gradient()的圆锥渐变。通过多个实例展示了不同语法和技巧，帮助读者掌握创建各种复杂渐变的方法。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

文章目录


学透CSS

渐变拼音jiàn biàn，意思是一种有规律性的变化。渐变能给人很强的节奏感和审美情趣。这种形式在日常生活中随处可见，是一种常见的视觉形象。由于绘画中透视的原理，物体就会出现近大远小的变化，许多自然理象都充满了渐变的形式特点。运用渐变技术能使画面更加丰富，给人视觉更强的冲击力。

background-image-设置元素的背景图片

定义

将图形（例如 PNG、SVG、JPG、GIF、WEBP）或渐变应用于元素的背景。

有两种不同类型的图像可以包含在 CSS 中：常规图像和渐变。

属性值

url(‘URL’)

图像的URL

background-image: url(./bk.jpg);
none

默认值，无图像

渐变
l
了解本专栏 订阅专栏 解锁全文
CSS 背景色 背景图片 渐变背景 - 重复线性渐变 background-image: repeating-linear-gradient()
weixin_41771260的博客
03-26 1423
repeating-linear-gradient() 用来生成重复的线性渐变图案 基础语法 background-image: repeating-linear-gradient( angleValue, colorStop positionStop, [colorStop_n positionStop_n], …… ) 参数说明 参数名称 说明 备注 angleVa...
CSS 背景色 背景图片 渐变背景 - 径向渐变 background-image:radial-gradient()
weixin_41771260的博客
03-25 2175
radial-gradient() 用来生成径向渐变的图片 基础语法 background-image: radial-gradient( shape extent at positionX positionY, colorStop positionStrop, colorStrop_2 positonStop_2, …… ) 参数说明 参数名称 说明 备注 shape...
CSS3 background-image颜色渐变的实现代码
09-22
主要介绍了CSS3 background-image颜色渐变的实现代码的相关资料,小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
Css径向渐变 - radial-gradient
最新发布
balbalaijk的博客
03-31 754
at 之后的position为径向渐变的中心位置，而形成的渐变图形的长宽与50% 50%时的长高差不多，所以会看起来造成一定的椭圆形状大小变化。函数中，你可以设置多个颜色停止点，渐变会从一个颜色停止点平滑过渡到下一个颜色停止点。颜色停止点用于定义渐变过程中颜色的变化位置和具体颜色值。径向渐变是颜色从一个中心点向外扩散的变化过程。二、radial-gradient 函数是什么。这一语法用于指定径向渐变的中心位置。3、颜色停止点-解释一下（
background-image渐变详解
时光清浅处，一步一安然
04-15 3959
属性不仅可以用来设置背景图片，还可以用于创建线性渐变（linear gradients）和径向渐变（radial gradients）背景。这个例子创建了一个从中心向外扩展的圆形径向渐变，起始颜色为红色，中间转为半透明黑色，最外圈为蓝色。线性渐变是从起点到终点沿着一条直线逐渐过渡的一种颜色或透明度的变化。这将创建一个从左到右的渐变，开始为红色，到达一半时变为黄色，剩余部分为绿色。径向渐变是从一个中心点向外围扩散的颜色或透明度的变化。
【CSS】渐变背景（background-image）
qq_45768871的博客
03-27 6456
文章目录【CSS】渐变背景（background-image）1.线性渐变1.1 CSS代码2.色标2.1 添加色标3.IE的支持程度4. 平铺的线性渐变5.径向渐变5.1设置径向渐变的中心点6.色标6.1IE的兼容性7. 平铺的径向渐变8. 后记 【CSS】渐变背景（background-image） 以前，我们要实现这种渐变，可能要用 Photoshop 或 Fireworks 创建一个渐...
background渐变
兔子零
08-15 391
body { height: 200px; background: -webkit-linear-gradient(red, green 30%); /* Safari 5.1 - 6.0 */ background: -o-linear-gradient(red, green 30%); /* Opera 11.1 - 12.0 */ background: -m...
html图形渐变颜色一半一半,CSS3教程：background-image之放射性渐变（radial-gradient）详解...
weixin_42222065的博客
06-10 2022
写完了linear-gradient线性渐变的初级教程后，看到了Lea Veron博客上那个用渐变做的图案集，我瞬间就觉得自己的想象力弱爆了。容我躺躺，再站起来继续战斗！缓过来了，开讲放射性渐变吧。一、放射性渐变原理别人都用ps解释，我却在渐变上独喜欢flash的渐变变形工具。别人都说径向渐变，flash里面显示的是放射性渐变，我就沿用了放射性渐变的说法。你看出来啦，我曾经是flash的迷妹！放射...
-webkit-gradient webkit内核浏览器的Linear Gradients (线性渐变) -Css3演示
weixin_30807677的博客
08-05 208
webkit内核的safari、 Chrome的Linear Gradients (线性渐变)的几点说明及演示： webkit内核的safari、 Chrome的Linear Gradients (线性渐变) 基本语法：background-image:-webkit-gradient(type,x1 y1, x2 y2, from(开始颜色值),to(结束颜色值), [color-stop(偏...
利用background-positon，background-image ,实现背景渐变
weixin_30710457的博客
07-25 217
.wrap{ height: 100%; background-color: #9933ff; background-image: linear-gradient(135deg, #bb33ff 30%,#9933ff 50%); background-position: 0 -100vh; transition: 1s; background-repeat: no-repe...
CSS3 background-image颜色渐变
weixin_34125592的博客
09-10 1216
linear-gradient 是CSS3中一个重要的属性，初看觉得很简单，但是别看它简单，它能实现很多复杂的图形。代码还是比较简单的: linear-gradient(65deg,#2b7ce7,#2b7ce7 50%,transparent 0,transparent),linear-gradient(115deg,#2b7ce7,#...
backgroundImage(背景渐变)
zzzaaaqqq123456的博客
05-26 187
从上到下开始渐变由黄色到深黄色 backgroundImage: 'linear-gradient(180deg, #fae969, 0%, #eda627 100%)'
HTML5基础加强css样式篇（background-image径向渐变函数）（四十一）
余正源的博客
04-07 3996
1.radial-gradient基础使用： .box { margin: 100px 0 0 100px; width: 400px; height: 200px; background-image: radial-gradient(red, b
你不知道的background-image渐变色
CIEL2019的博客
11-13 1587
大部分刚接触前端的应该对background-image的了解应该都只在背景图上，就比如说background-image：url…，但是其实，background-img还可以用于设置渐变色 线性渐变 线性渐变是最基本的渐变类型。这种渐变在一条直线上从一个颜色过渡到另一个颜色。 background-image: linear-gradient( 角度 , 颜色); background: ...
background的复合写法：图片、渐变色、纯色
Serena_tz的博客
04-11 616
的复合写法可以使用逗号分隔多个属性值，每个属性值对应不同的背景层。属性，表示不重复平铺图片，使用100% 100%指定了背景图片的位置，使用。函数定义了一个线性渐变背景层，角度为38度，颜色从白色。函数指了一个图片背景层，图片路径为。指定了背景图片的大小。设置了一个纯色背景层。这个写法中，首先使用。
CSS篇径向渐变 background-image: radial-gradient
weixin_42497127的博客
11-23 456
radial-gradient([<>]? [<形状> || <大小>,]? <点>, <点>…);起点 起点：可以是关键字（left,top,right,bottom），具体数值或百分比 形状： ellipse、circle 大小 :具体数值或百分比，也可以是关键字 （最近端，最近角，最远端，最远角，包含或覆盖 (closest-side, closest-corner, farthest-side, farthest-corner, conta
渐变属性(background-image)全解析
qq_45799465的博客
01-25 5606
背景图线性渐变 线性渐变 background-image:linear-gradient(red,blue); 默认是从上往下渐变。 background-image:linear-gradient(to 方向词,red,blue); background-image:带CSS3浏览器前缀-linear-gradient( 方向词,red,blue); 可以设置渐变方向：从上往下，从下往上，从左往右，从右往左。 background-image:l.
background-image: -webkit-linear-gradient
07-02
`background-image: -webkit-linear-gradient` 是 CSS 中的一种背景图像渐变效果，它使用 WebKit（Safari 和 Chrome 浏览器使用的渲染引擎）特定的语法来创建线性渐变。这个属性用于为元素的背景添加一个从左到右或...
评论 25
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

YOLO大师

你的打赏，我的动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值