CSS3中新增的背景属性和渐变函数有哪些
这篇文章主要介绍了CSS3中新增的背景属性和渐变函数有哪些,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获,下面让小编带着大家一起了解一下。
长子ssl适用于网站、小程序/APP、API接口等需要进行数据传输应用场景,ssl证书未来市场广阔!成为创新互联的ssl证书销售渠道,可以享受市场价格4-6折优惠!如果有意向欢迎电话联系或者加微信:13518219792(备注:SSL证书合作)期待与您的合作!
背景 Background
background
是多个背景属性的简写,
backgrounf: [background-color] | [background-image] | [background-position][/background-size] | [background-repeat] | [background-attachment] | [background-clip] | [background-origin], ...;
注意:如果有 background-size
值,需要紧跟 background-position
并且用 "/"隔开;
background-image
background-image
属性可以添加多张背景图片,不同的背景图像和图像用逗号隔开,所有的图片中显示在最顶端的为第一张。设置多张 png 图片,可以出多张背景图叠加的效果。
background-image: url("../../media/examples/lizard.png"), url("../../media/examples/star.png");
建议:使用背景图片的时候,最好也设置背景颜色(background-color),作为背景图片不支持时的 planB。
background-size
CSS3 以前,背景图像大小由图像的实际大小决定。在 CSS3 中,background-size
属性可以指定背景图像的大小,取值像素或百分比(相对于父元素的宽度和高度的百分比的大小)。
图片可以保有其原有的尺寸,或者拉伸到新的尺寸,或者在保持其原有比例的同时缩放到元素的可用空间的尺寸:
cover
:保持图像的宽高比例,缩放背景图片以完全覆盖背景区,可能背景图片部分看不见。contain
:保持图像的宽高比例,缩放背景图片以完全装入背景区,可能背景区部分空白。一个值:这个值指定图片的宽度,图片的高度隐式的为 auto
两个值:第一个值指定图片的宽度,第二个值指定图片的高度
background-origin
background-origin
规定了指定背景图片 background-image
属性的原点位置的背景相对区域。
注意:当使用 background-attachment
为 fixed
时,该属性将被忽略不起作用。
border-box
背景图片的摆放以 border 区域为参考padding-box
背景图片的摆放以 padding 区域为参考content-box
背景图片的摆放以 content 区域为参考
background-clip
background-clip
背景剪裁属性是指定背景(背景图片或颜色)的绘制区域。
border-box
:背景区域延伸到边框(但是在边框下层)padding-box
:背景区域延伸到内边距content-box
:背景区域延伸到内容区text
:背景被裁剪成文字的前景色。需要加上前缀-webkit-background-clip: text;
渐变 Gradient
CSS3 渐变(gradients)可以让在两个或多个指定的颜色之间显示平稳的过渡。对比使用渐变图片,gradients 可以减少下载的时间和宽带的使用,并且在放大时看起来效果更好。
线形渐变
颜色值沿着一条隐式的直线逐渐过渡。由 linear-gradient()
产生。
为了创建一个线性渐变,你必须至少定义两种颜色节点。颜色节点即你想要呈现平稳过渡的颜色。同时,你也可以设置一个起点和一个方向(或一个角度)。
/* 渐变轴为45度,从蓝色渐变到红色 */ linear-gradient(45deg, blue, red); /* 从右下到左上、从蓝色渐变到红色 */ linear-gradient(to left top, blue, red); /* 从下到上,从蓝色开始渐变、到高度40%位置是绿色渐变开始、最后以红色结束 */ linear-gradient(0deg, blue, green 40%, red);
语法
linear-gradient([| to ,]? )
:用角度值指定渐变的方向(或角度)。角度顺时针增加。
:描述渐变线的起始点位置。to top
,to bottom
,to left
和to right
这些值会被转换成角度0 度
、180 度
、270 度
和90 度
。其余值会被转换为一个以向顶部中央方向为起点顺时针旋转的角度。渐变线的结束点与其起点中心对称。
:颜色变化列表。支持透明度(rgba(255,0,0,0.1)
)。
径向渐变
radial-gradient()
CSS 函数创建了一个图像,该图像的颜色值由一个中心点(原点)向外扩散并逐渐过渡到其他颜色值。
同样至少需要定义两种颜色节点,也可以指定渐变的中心(默认在中心点,center
)、形状(默认椭圆形 ellipse
)、大小(默认 farthest-corner
,表示到最远的角落)
语法
radial-gradient( [shape size at position] ?[ , ]+ )
shape
:椭圆形(ellipse
,默认)或圆形(circle
)size
:closest-side
, 渐变的边缘形状与容器距离渐变中心点最近的一边相切(圆形)或者至少与距离渐变中心点最近的垂直和水平边相切(椭圆)。closest-corner
, 渐变的边缘形状与容器距离渐变中心点最近的一个角相交。farthest-side
, 与 closest-side 相反,边缘形状与容器距离渐变中心点最远的一边相切(或最远的垂直和水平边)。farthest-corner
, 渐变的边缘形状与容器距离渐变中心点最远的一个角相交。position
:可以是具体的两个位置偏移值(10% 20%
),也可以是关键字(left、right、top、bottom)
重复渐变
重复多次渐变图案直到足够填满指定元素。由 repeating-linear-gradient()
和 repeating-radial-gradient()
函数产生。
重复函数的参数同上,不同的是它会基于渐变长度(最后一个色标和第一个之间的距离)倍数重复。
.linear-repeat { background: repeating-linear-gradient( to top left, lightpink, lightpink 5px, white 5px, white 10px ); }.radial-repeat { background: repeating-radial-gradient( powderblue, powderblue 8px, white 8px, white 16px ); }
感谢你能够认真阅读完这篇文章,希望小编分享的“CSS3中新增的背景属性和渐变函数有哪些”这篇文章对大家有帮助,同时也希望大家多多支持创新互联,关注创新互联行业资讯频道,更多相关知识等着你来学习!
网站名称:CSS3中新增的背景属性和渐变函数有哪些
分享链接:http://myzitong.com/article/psgcpj.html