CSS3中新增的背景属性和渐变函数有哪些

发布时间:2021-08-21 13:54:49 作者:小新
来源:亿速云 阅读:125

这篇文章主要介绍了CSS3中新增的背景属性和渐变函数有哪些,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获,下面让小编带着大家一起了解一下。

背景 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");

CSS3中新增的背景属性和渐变函数有哪些

建议: 使用背景图片的时候,最好也设置背景颜色(background-color),作为背景图片不支持时的 planB。

background-size

CSS3 以前,背景图像大小由图像的实际大小决定。在 CSS3 中,background-size 属性可以指定背景图像的大小,取值像素或百分比(相对于父元素的宽度和高度的百分比的大小)。

图片可以保有其原有的尺寸,或者拉伸到新的尺寸,或者在保持其原有比例的同时缩放到元素的可用空间的尺寸:

background-origin

background-origin 规定了指定背景图片 background-image 属性的原点位置的背景相对区域。

注意: 当使用 background-attachmentfixed 时,该属性将被忽略不起作用。

CSS3中新增的背景属性和渐变函数有哪些

background-clip

background-clip 背景剪裁属性是指定背景(背景图片或颜色)的绘制区域。

渐变 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([ <angle> | to <side-or-corner> ,]? <color-stop-list> )

径向渐变

radial-gradient() CSS 函数创建了一个图像,该图像的颜色值由一个中心点(原点)向外扩散并逐渐过渡到其他颜色值。

同样至少需要定义两种颜色节点,也可以指定渐变的中心(默认在中心点,center)、形状(默认椭圆形 ellipse)、大小(默认 farthest-corner,表示到最远的角落)

语法

radial-gradient(
  [shape size at position] ?
  <color-stop-list> [ , <color-stop-list> ]+
)

重复渐变

重复多次渐变图案直到足够填满指定元素。由 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中新增的背景属性和渐变函数有哪些”这篇文章对大家有帮助,同时也希望大家多多支持亿速云,关注亿速云行业资讯频道,更多相关知识等着你来学习!

推荐阅读:
  1. 使用CSS3中gradient属性做出背景渐变效果的方法
  2. CSS3背景属性有哪些

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

css3

上一篇:vue中使用swiper插件出错的问题怎么解决

下一篇:如何解决正则表示式匹配引起的mongo数据库cpu占用率高问题

相关阅读

您好,登录后才能下订单哦!

密码登录
登录注册
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》