CSS3渐变色背景如何设置

发布时间：2023-12-27 12:58:46 所属栏目：语言来源：DaWei

导读： 这篇文章给大家分享的是CSS3渐变色背景的实现。小编觉得挺实用的，因此分享给大家做个参考，文中给大家介绍了实现原理及方法，示例代码也很详细，有需要的朋友可以参考，接下来就跟随小编一

这篇文章给大家分享的是CSS3渐变色背景的实现。小编觉得挺实用的，因此分享给大家做个参考，文中给大家介绍了实现原理及方法，示例代码也很详细，有需要的朋友可以参考，接下来就跟随小编一起了解看看吧。

渐变 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> )
<angle>：用角度值指定渐变的方向（或角度）。角度顺时针增加。

<side-or-corner>：描述渐变线的起始点位置。to top, to bottom, to left 和 to right 这些值会被转换成角度 0 度、180 度、270 度和 90 度。其余值会被转换为一个以向顶部中央方向为起点顺时针旋转的角度。渐变线的结束点与其起点中心对称。
<color-stop-list>：颜色变化列表。支持透明度（rgba(255,0,0,0.1)）。

示例：背景色线性渐变--background-image+linear-gradient()

<!DOCTYPE html>
<html>
   <head>
       <meta charset="UTF-8">
       <title>css背景渐变--线性渐变</title>
       <style>
           .demo{
               width:500 ;
               height: 300;
               margin: 50px auto;
           }
           .demo *{
               width: 200px;
               height: 200px;
               margin: 20px;
               text-align: center;
               line-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>

现在大家对于CSS3渐变色背景如何设置应该都清楚了吧，希望大家阅读完这篇文章能有所收获。

（编辑：江门站长网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!