渐变色---背景图片

总结：

渐变是用于创建一个表示两种或多种颜色线性/径向渐变的图片，是特别的image类型，只能用于image可以使用的地方

1、产生的原因：

使用图片会增加HTTP请求次数并增大了页面体积，导致延长页面加载事件

含义：

指在两个及以上的颜色之间呈现出一种平滑的过渡效果，该效果是矢量效果，不会因为页面的放大而出现模糊的情况

2、分类

线性渐变 linear-gradient(to right,red 0%,blue 100%)

径向渐变 radial-gradient(at bottom,red 0%,blue 100%)

at后面可以跟坐标值

类似于同心圆向外扩散可以画出○套○的效果

不同两个颜色的间隔点相同圆为实心不会发散

例：

radial-gradient(at bottom,red 10%,yellow 10%,yellow 20%)

角向渐变

3、特性

可以使用背景图片的所有样式，如大小位置基点剪切等，相当于一张不会失真的背景图片

4、重复渐变色

repeating-linear-gradient(#000 0%,#fff0 100%)

repeating-radial-gradient()

色标是无线循环重复的，直到填满整个背景

典型案例：

太极图

彩虹

实质：呈现出来的一个图形，不一定就是图形本来的样式，可能是通过不同图形的拼接，同一颜色的遮盖才最终显示出来想要的图形的样式画图形时一定要记住只要能拼接处最终效果就可以不要忽略相同颜色被遮盖掉的部分

渐变色---背景图片相关推荐

学习使用html2canvas生成渐变色背景图片
学习使用html2canvas生成渐变色背景图片全部代码 html2canvas官网生成图片的下载全部代码 <!DOCTYPE html> <html><head& ...
html设置渐变色背景图片,css中渐变色作为背景图来使用总结
qt中使用样式设置渐变色背景setStyleSheet()函数设置背景的前期是设置的窗口控件有父窗口ui.widget->setStyleSheet("background-color ...
C# 操作Word——设置Word文档背景色（纯色、渐变色、图片背景色）
简介 Word是我们日常生活.学习和工作中必不可少的文档处理工具.精致美观的文档能给人带来阅读时视觉上的美感.在本篇文章中,将介绍如何使用组件Free Spire.Doc for .NET(社区版)给 ...
iOS小技能：创建渐变色背景（提供渐变色无法覆盖整个视图的解决方案）
文章目录前言 I 创建渐变色背景图片 1.1 核心代码 1.2 使用方法 II 用代码修改图片颜色 III 其他知识点 3.1 根据图片获取UIColor 3.2 根据RGBHex获取UIColor ...
CSS中背景颜色、背景图片、渐变色、背景定位、精灵图（雪碧图）介绍
背景background: 背景可以设置为颜色和图片,设置为图片时,可以对图片继续设置. background-color:设置背景颜色: 其颜色的取值方式前面提到过,和color的取值一样,但是默认 ...
css3背景-背景图片-渐变色
背景添加渐变色 1.背景颜色:backgroud-color: 2. 背景图片背景图片居中 3.渐变色 1.线性渐变(Linear Gradients)- 向下/向上/向左/向右/对角方向 2.径向 ...
css3 实现背景渐变色与背景图片并存效果
css3 实现背景渐变色与背景图片并存效果先看效果背景是渐变色+浅色透明图案组成,UI没有完全切成一张图,刚好试试看能不能使用背景渐变+图片的效果. 对兼容性要求高的不要这样做,直接叫UI切合成 ...
css 背景图片和渐变色并存
.login-container {background: url(/static/img/pic.e0485801.png) 200px no-repeat,linear-gradient(90de ...
Duilib技巧：背景图片平铺
贴图的描述方式有两种 // 1.aaa.jpg // 2.file='aaa.jpg' res='' restype='0' dest='0,0,0,0' source='0,0,0 ...

渐变色---背景图片

渐变色---背景图片相关推荐

最新文章

热门文章