当前位置: 首页 > Web前端 > CSS

background线性渐变

时间:2023-03-30 14:07:18 CSS

格式:background:linear-gradient(direction,color-stop1,color-stop2,...);=linear-gradient([[|to],]?[,]+)=[左|对]||[顶|底部]<颜色停止>=<颜色>[<长度>|<百分比>]?值:以下值用于表示渐变的方向,可以使用角度或关键字来设置::顺时针角度使用角度值来指定渐变(或角度)的方向。toleft:设置渐变为从右到左。相当于:270degtoright:设置从左到右的渐变。相当于:90degtotop:设置从下到上的渐变。相当于:0degtobottom:设置从上到下的渐变。相当于:180deg。这是默认值,相当于留空。用于指定渐变的起始颜色和终止颜色::指定颜色。:使用长度值指定起始颜色和终止颜色的位置。负值是不允许的,不涉及颜色的长度:以百分比指定开始和结束颜色位置。相邻的两个color-stops之间的关系是:前者的起始位置和后者的起始位置之差为两种颜色的渐变过渡距离,如果后一个位置越过前一个位置,则起始位置If是前者的结束位置,不会有渐变过渡,会形成条纹图案。如果一个色标的位置值小于整个列表中它之前的色标的位置值,则该色标的位置值将被设置为所有色标位置值的最大值颜色停在它前面。您可以使用background-size来设置背景图像的大小。这同样适用于线性渐变生成的图像。background-size:length|percentage|cover|contain;length(20px30pxstretchedimage)设置背景图片的高度和宽度。第一个值设置宽度,第二个值设置高度。如果只设置了一个值,第二个值将设置为“auto”。percentage(100%100%stretchimage)将背景图片的宽度和高度设置为父元素的百分比。第一个值设置宽度,第二个值设置高度。如果只设置了一个值,第二个值将设置为“auto”。覆盖(不拉伸图像)将背景图像扩展到足够大,以便背景图像完全覆盖背景区域。背景图像的某些部分可能不会显示在背景锚区域中。包含(不拉伸图像)将图像扩展到最大尺寸,使其宽度和高度完全适合内容区域。