边肖将与您分享css3如何将背景设置为渐变颜色。相信大部分人还不太了解,所以分享这篇文章给大家参考。希望你看完这篇文章会有很多收获。我们一起来看看吧!
设置方法:1。使用“background:linear线性渐变(渐变方向,颜色1,颜色2,);"声明;2.使用“背景:径向渐变(形状大小位置,开始颜色,结束颜色)";“声明。
本教程操作环境:windows7系统,CSS3HTML5第5版,戴尔G3电脑。
渐变 Gradient
CSS3渐变可以使两种或两种以上指定颜色之间的平滑过渡出现。与渐变图片相比,渐变可以减少下载时间和宽带使用,放大后看起来更好。
线形渐变
颜色值沿着一条隐含的直线逐渐过渡。由线性梯度()生成。
为了创建线性渐变,必须至少定义两个颜色节点。节点是您想要呈现平滑过渡的颜色。同时,还可以设置起点和方向(或角度)。
/*渐变轴为45度,从蓝色到红色*/
线性渐变(45度,蓝色,红色);
/*从右下角到左上角,从蓝色到红色*/
线性渐变(tolefttop、蓝色、红色);
/*从底部到顶部,从蓝色到40%高度,绿色渐变以红色开始和结束*/
线性渐变(0度,蓝色,绿色40%,红色);语法
线性渐变([角度|到侧面或拐角,]?颜色-停止列表)角度:使用角度值指定渐变的方向(或角度)。角度顺时针增加。
边或角:描述渐变线的起点。顶部、底部、左侧和右侧的值将转换为0度、180度、270度和90度的角度。其余值将转换为从顶部中心方向开始的顺时针旋转角度。渐变线的终点与其起点的中心对称。
颜色停止列表:颜色变化列表。支持透明度(rgba(255,0,0,0.1))。
示例:背景色线性渐变--background-image+linear-gradient()
!DOCTYPEhtml
超文本标记语言
头
metachartset=' UTF-8 '
Css背景渐变-线性渐变/标题css
风格。演示{
宽度:500;
高度:300;
margin:50pxauto
}。演示* { 0
宽度width:200px
高度:200 px;
margin:20px
文本对齐:居中;
里
ne-height: 200px;
color: #fff;
font-size: 16px;
float: left;
}
.demo1{
/* 底色 */
background-color: #fd0d0d;
/* chrome 2+, safari 4+; multiple color stops */
background-image:-webkit-gradient(linear, left bottom, left top, color-stop(0.32, #fd0d0d), color-stop(0.66, #d89e3c), color-stop(0.83, #97bb51));
/* chrome 10+, safari 5.1+ */
background-image: -webkit-linear-gradient(#fd0d0d, #d89e3c, #97bb51);
/* firefox; multiple color stops */
background-image: -moz-linear-gradient(top,#fd0d0d, #d89e3c, #97bb51);
/* ie 6+ */
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fd0d0d', endColorstr='#d89e3c');
/* ie8 + */
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#fd0d0d', endColorstr='#d89e3c')";
/* ie10 */
background-image: -ms-linear-gradient(#fd0d0d, #d89e3c, #97bb51);
/* opera 11.1 */
background-image: -o-linear-gradient(#fd0d0d, #d89e3c, #97bb51);
/* 标准写法 */
background-image: linear-gradient(#fd0d0d, #d89e3c, #97bb51);
}
.demo2{
/* 底色 */
background-color:#d41a1a;
/* chrome 2+, safari 4+; multiple color stops */
background-image:-webkit-gradient(linear, left bottom, right top, color-stop(0.32, #d41a1a), color-stop(0.66, #d9e60c), color-stop(0.83, #5c7c99));
/* chrome 10+, safari 5.1+ */
background-image:-webkit-linear-gradient(45deg, #d41a1a, #d9e60c, #5c7c99);
/* firefox; multiple color stops */
background-image:-moz-linear-gradient(45deg, #d41a1a, #d9e60c, #5c7c99);
/* ie10 */
background-image: -ms-linear-gradient(45deg, #d41a1a 0%, #d9e60c 100%);
/* opera 11.1 */
background-image: -o-linear-gradient(45deg, #d41a1a, #d9e60c);
/* 标准写法 */
background-image: linear-gradient(45deg, #d41a1a, #d9e60c);
}
</style>
</head>
<body>
<div class="demo">
<div class="demo1">基本线性渐变--自上而下</div>
<div class="demo2">基本线性渐变--45度角</div>
</div>
</body>
</html>
径向渐变
radial-gradient()
CSS 函数创建了一个图像,该图像的颜色值由一个中心点(原点)向外扩散并逐渐过渡到其他颜色值。
同样至少需要定义两种颜色节点,也可以指定渐变的中心(默认在中心点,center
)、形状(默认椭圆形 ellipse
)、大小(默认 farthest-corner
,表示到最远的角落)
语法
radial-gradient( [shape size at position] ? <color-stop-list> [ , <color-stop-list> ]+ )
-
shape
:椭圆形(ellipse
,默认)或圆形(circle
) -
size
: -
closest-side
, 渐变的边缘形状与容器距离渐变中心点最近的一边相切(圆形)或者至少与距离渐变中心点最近的垂直和水平边相切(椭圆)。 -
closest-corner
, 渐变的边缘形状与容器距离渐变中心点最近的一个角相交。 -
farthest-side
, 与 closest-side 相反,边缘形状与容器距离渐变中心点最远的一边相切(或最远的垂直和水平边)。 -
farthest-corner
, 渐变的边缘形状与容器距离渐变中心点最远的一个角相交。 -
position
:可以是具体的两个位置偏移值(10% 20%
),也可以是关键字(left、right、top、bottom)
示例:背景色径向渐变--background-image+radial-gradient()
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>css背景渐变--径向渐变</title> <style> .demo{ width:500px ; height:200px; margin: 50px auto; } .demo *{ width:200px ; height:200px; margin: 50px 15px; float: left; } .demo1{ background-image: -moz-radial-gradient(#ecff05, red); background-image: -webkit-gradient(radial, center center, 0, center center, 220, from(#ecff05), to(red)); /* old */ background-image: -webkit-radial-gradient(#ecff05, red); /* new syntax */ background-image: radial-gradient(#ecff05, red); } .demo2{ background-image: -moz-radial-gradient(45px 45px 45deg, circle cover, #ecff05 0%, orange 100%, red 95%); background-image: -webkit-radial-gradient(45px 45px, circle cover, #ecff05, red); background-image: radial-gradient(45px 45px 45deg, circle cover, #ecff05 0%, orange 100%, red 95%); } </style> </head> <body> <div class="demo"> <div class="demo1"></div> <div class="demo2"></div> </div> </body> </html>
重复渐变
重复多次渐变图案直到足够填满指定元素。由 repeating-linear-gradient()
和 repeating-radial-gradient()
函数产生。
重复函数的参数同上,不同的是它会基于渐变长度(最后一个色标和第一个之间的距离)倍数重复。
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>css背景渐变--重复渐变</title> <style> .demo{ width:500px ; height:200px; margin: 50px auto; } .demo *{ width:200px ; height:200px; margin: 50px 15px; float: left; } .demo1{ background: repeating-linear-gradient( to top left, lightpink, lightpink 5px, white 5px, white 10px ); } .demo2{ background: repeating-radial-gradient( powderblue, powderblue 8px, white 8px, white 16px ); } </style> </head> <body> <div class="demo"> <div class="demo1"></div> <div class="demo2"></div> </div> </body> </html>
以上是“css3如何将背景设置为渐变色”这篇文章的所有内容,感谢各位的阅读!相信大家都有了一定的了解,希望分享的内容对大家有所帮助,如果还想学习更多知识,欢迎关注行业资讯频道!
内容来源网络,如有侵权,联系删除,本文地址:https://www.230890.com/zhan/152806.html