background 线性渐变

xioqua 发布于2019-08-29 15:32 / 3177人阅读

摘要：设置渐变为从右到左。用于指定渐变的起止颜色指定颜色。第一个值设置宽度，第二个值设置高度。背景图像的某些部分也许无法显示在背景定位区域中。

格式：

background: linear-gradient(direction, color-stop1, color-stop2, ...);

 = linear-gradient([ [  | to ] ,]? [, ]+) 
 = [left | right] || [top | bottom]
 =  [  |  ]?

取值：
下述值用来表示渐变的方向，可以使用角度或者关键字来设置：
：顺时针方向角度
用角度值指定渐变的方向（或角度）。
to left：
设置渐变为从右到左。相当于: 270deg
to right：
设置渐变从左到右。相当于: 90deg
to top：
设置渐变从下到上。相当于: 0deg
to bottom：
设置渐变从上到下。相当于: 180deg。这是默认值，等同于留空不写。
用于指定渐变的起止颜色：
：
指定颜色。
：
用长度值指定起止色位置。不允许负值不是指颜色的长度
：
用百分比指定起止色位置。

两个相邻的color-stop之间的关系为：前者的起始位置与后者起始位置的差之间为两个颜色的渐变过度距离，若后者位置与前者位置交叉则起始位置为前者结束位置，则无渐变过度，形成条纹样式。
如果某个色标的位置值比整个列表中在它之前的色标的位置值都要小，则该色标的位置值会被设置为它前面所有色标位置值的最大值。

可利用background-size来设置背景图像的大小。linear-gradient生成的图像也同样适用。

background-size: length|percentage|cover|contain;

length （20px 30px拉伸图片）
设置背景图像的高度和宽度。第一个值设置宽度，第二个值设置高度。如果只设置一个值，则第二个值会被设置为 "auto"。

percentage （100% 100% 拉伸图片）
以父元素的百分比来设置背景图像的宽度和高度。第一个值设置宽度，第二个值设置高度。如果只设置一个值，则第二个值会被设置为 "auto"。

cover （不拉伸图片）
把背景图像扩展至足够大，以使背景图像完全覆盖背景区域。背景图像的某些部分也许无法显示在背景定位区域中。

contain （不拉伸图片）
把图像图像扩展至最大尺寸，以使其宽度和高度完全适应内容区域。

GPU云服务器云服务器 Background _background background:url 和Background

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/113383.html

入坑线性渐变linear-gradient

摘要：线性渐变的表达式看到线性渐变的表达式，又要开始用脑了，分拆开来其实很好理解。结果为线性渐变中的角度默认是从下到上的垂直方向开始顺时针进行旋转的。线性渐变linear-gradient的表达式：linear-gradient( [ | ,]? [, ]+); 看到线性渐变的表达式，又要开始用脑了，分拆开来其实很好理解。先从几个实际的表达式讲起： background-image:li...

gekylin 2019-08-29 11:24 评论0 收藏0
入坑线性渐变linear-gradient

摘要：线性渐变的表达式看到线性渐变的表达式，又要开始用脑了，分拆开来其实很好理解。结果为线性渐变中的角度默认是从下到上的垂直方向开始顺时针进行旋转的。线性渐变linear-gradient的表达式：linear-gradient( [ | ,]? [, ]+); 看到线性渐变的表达式，又要开始用脑了，分拆开来其实很好理解。先从几个实际的表达式讲起： background-image:li...

Corwien 2019-08-01 15:49 评论0 收藏0
CSS3 线性渐变应用

摘要：分为线性渐变和径向渐变。而我们今天主要是通过一个小例子来针对线性渐变来剖析其具体的用法。今天的例子就是用的线性渐变制作一个大致的针孔注射器。第一个参数表示线性渐变的方向，是从上到下是从左到右，如果定义成，那就是从左上角到右下角。 CSS3 Gradient 分为 linear-gradient（线性渐变）和 radial-gradient（径向渐变）。而我们今天主要是通过一个小例子来针...

Snailclimb 2019-08-30 13:05 评论0 收藏0
浅探css3渐变

摘要：基本用法想要知道线性渐变有什么用，当然要先学习它的属性和用法。下面我们先一起学习一下线性渐变的属性。函数的第一个参数是角度或者方向，第二个参数是截止颜色的值，要想产生渐变的效果，当然至少要两个或者两个以上的颜色值。 css3的渐变属性已经在各种网页设计中被广泛使用，在没有css3的渐变属性之前，要实现一些多种颜色切换的效果图，你可能别无他法，只能用一个图片来显示，虽然你知道使用图片需要...

lieeps 2019-08-29 17:17 评论0 收藏0
[译]HTML&CSS Lesson7: 设置背景和渐变色

摘要：属性值则依赖于我们需要创建什么样的渐变背景，例如线性渐变或放射性渐变。我们会在线性渐变中介绍不同种类的供应商前缀，但为了简便起见，放射性渐变中我们不会再提及。线性渐变多年来，设计师和开发者们都是通过切图来实现渐变背景。背景对网站的设计有重大的影响。它有利于建立网站的整体感觉，设置分组，分配优先级，对网站的可用性也有相当大的影响。在CSS中，元素的背景可以是一个纯色，一张图，一个渐变...

bang590 2019-08-29 16:54 评论0 收藏0
[译]HTML&CSS Lesson7: 设置背景和渐变色

摘要：属性值则依赖于我们需要创建什么样的渐变背景，例如线性渐变或放射性渐变。我们会在线性渐变中介绍不同种类的供应商前缀，但为了简便起见，放射性渐变中我们不会再提及。线性渐变多年来，设计师和开发者们都是通过切图来实现渐变背景。背景对网站的设计有重大的影响。它有利于建立网站的整体感觉，设置分组，分配优先级，对网站的可用性也有相当大的影响。在CSS中，元素的背景可以是一个纯色，一张图，一个渐变...

jk_v1 2019-08-02 11:40 评论0 收藏0