请选择 进入手机版 | 继续访问电脑版
开启辅助访问
帐号登录 |立即注册

首页css 用网页技术CSS实现网页背景渐变的四种代码设置

 
下面是用网页技术CSS实现网页背景渐变的四种代码设置的攻略。

一、线性渐变
线性渐变是指沿着一条直线从一个颜色渐变到另一个颜色。CSS实现线性渐变的代码如下所示:

body {
    background: linear-gradient(to right, #FFD662, #F90E41);
}

这里通过background属性来设置背景渐变效果,括号中的to right表示渐变的方向,从左到右渐变;#FFD662和#F90E41分别是起始颜色和结束颜色。

二、径向渐变
径向渐变是指从一个点开始向各个方向渐变的色彩。CSS实现径向渐变的代码如下所示:

body {
    background: radial-gradient(circle, #81D4FA, #01579B);
}

这里以圆形为渐变方式,从圆心开始向周围渐变。#81D4FA和#01579B分别是起始颜色和结束颜色。

三、重复线性渐变
重复线性渐变是指将线性渐变无限重复,直到填满整个背景。CSS实现重复线性渐变的代码如下所示:

body {
    background: repeating-linear-gradient(to right, #D50000 0, #D50000 20%, #F57F17 20%, #F57F17 40%);
}

这里使用了repeating-linear-gradient属性来实现重复线性渐变,每个颜色指定了对应的位置的渐变位置。

四、重复径向渐变
重复径向渐变是指将径向渐变无限重复,直到填满整个背景。CSS实现重复径向渐变的代码如下所示:

body {
        background: repeating-radial-gradient(circle, #AA00FF, #AA00FF 10%, #00B0FF 10%, #00B0FF 20%);
}

这里使用了repeating-radial-gradient属性来实现重复径向渐变,每个颜色指定了对应的位置的渐变位置。

总的来说,以上四种渐变方式可以用来美化网页背景,使得网页更加生动、丰富。

回复

使用道具 举报

0 个回复

倒序浏览

快速回复

您需要登录后才可以回帖 登录 or 立即注册

本版积分规则

友情链接
  • 艾Q网

    提供设计文章,教程和分享聚合信息与导航工具,最新音乐,动漫,游戏资讯的网站。