网页渐变背景代码（html背景图片渐变代码怎么写）

今天给各位分享网页渐变背景代码的知识，其中也会对html背景图片渐变代码怎么写进行解释，如果能碰巧解决你现在面临的问题，别忘了关注本站，现在开始吧！

本文目录一览：

• 1、css如何实现真正的网页渐变背景
• 2、html中如何让背景颜色渐变？？？
• 3、怎样用css实现网页背景颜色渐变
• 4、CSS设置DIV背景色渐变显示
• 5、网页背景颜色渐变代码

css如何实现真正的网页渐变背景

方法：根据浏览者的分辨率自动调用样式表

1、新建两个样式表分别命名为：1024.css 800.css（当然有更多分辨率，可以增加样式表）

2、在样式表中分别定义好图片作为网页背景。

3、新建一个网页文件，把下面代码复制过去。

script language="JavaScript"

!--

function test(){

var a=screen.width+".css"

//alert(a)

//测试变量a的值

document.getElementById("eric").href =a;

}

//--

/script

html

head

meta http-equiv="Content-Type" content="text/html; charset=gb2312"

title无标题文档/title

link href="" rel="stylesheet" type="text/css" id="eric"

/head

body onLoad="test()"

/body

/html

搞定！

html中如何让背景颜色渐变？？？

1、打开html开发工具，新建一个html文件在html代码页面创建一个div并给这个标签添加一个类名linear：

2、然后为类设置样式。在title后面创建一个style标签，然后在这个标签里面设置linear类的高、渐变（linear-gradient）的样式，这里的第一个参数是设置渐变的方向，后面两个参数是起始颜色和终止颜色。设置好后去浏览器查看效果：

3、保存好html文件后使用浏览器查看效果。就会看到一个绿色到红色的渐变了。以上就是html中让背景颜色渐变的设置方法介绍：

怎样用css实现网页背景颜色渐变

CSS3 渐变（gradients）可以让你在两个或多个指定的颜色之间显示平稳的过渡。

CSS3 定义了两种类型的渐变（gradients）：线性渐变（Linear Gradients）- 向下/向上/向左/向右/对角方向与径向渐变（Radial Gradients）- 由它们的中心定义

线性渐变：

3.1、从上到下的线性渐变：

#grad {

background: -webkit-linear-gradient(red, blue); /* Safari 5.1 - 6.0 */

background: -o-linear-gradient(red, blue); /* Opera 11.1 - 12.0 */

background: -moz-linear-gradient(red, blue); /* Firefox 3.6 - 15 */

background: linear-gradient(red, blue); /* 标准的语法 */

}

3.2、从左到右的线性渐变：

#grad {

background: -webkit-linear-gradient(left, red , blue); /* Safari 5.1 - 6.0 */

background: -o-linear-gradient(right, red, blue); /* Opera 11.1 - 12.0 */

background: -moz-linear-gradient(right, red, blue); /* Firefox 3.6 - 15 */

background: linear-gradient(to right, red , blue); /* 标准的语法 */

}

3.3、线性渐变 - 对角：

#grad {

background: -webkit-linear-gradient(left top, red , blue); /* Safari 5.1 - 6.0 */  background: -o-linear-gradient(bottom right, red, blue); /* Opera 11.1 - 12.0 */  background: -moz-linear-gradient(bottom right, red, blue); /* Firefox 3.6 - 15 */  background: linear-gradient(to bottom right, red , blue); /* 标准的语法 */

}

4.径向渐变：

4.1、颜色结点均匀分布的径向渐变：

#grad {

background: -webkit-radial-gradient(red, green, blue); /* Safari 5.1 - 6.0 */  background: -o-radial-gradient(red, green, blue); /* Opera 11.6 - 12.0 */

background: -moz-radial-gradient(red, green, blue); /* Firefox 3.6 - 15 */

background: radial-gradient(red, green, blue); /* 标准的语法 */

}

4.2、颜色结点不均匀分布的径向渐变：：

#grad {

background: -webkit-radial-gradient(red 5%, green 15%, blue 60%); /* Safari 5.1 - 6.0 */

background: -o-radial-gradient(red 5%, green 15%, blue 60%); /* Opera 11.6 - 12.0 */

background: -moz-radial-gradient(red 5%, green 15%, blue 60%); /* Firefox 3.6 - 15 */  background: radial-gradient(red 5%, green 15%, blue 60%); /* 标准的语法 */

}

4.3、形状为圆形的径向渐变：

#grad {

background: -webkit-radial-gradient(circle, red, yellow, green); /* Safari 5.1 - 6.0 */  background: -o-radial-gradient(circle, red, yellow, green); /* Opera 11.6 - 12.0 */  background: -moz-radial-gradient(circle, red, yellow, green); /* Firefox 3.6 - 15 */  background: radial-gradient(circle, red, yellow, green); /* 标准的语法 */

}

CSS设置DIV背景色渐变显示

01

打开软件

可以使用Dreamweaver或Visual studio软件，比如打开VS软件，如下图所示：

02

创建一个DIV

然后在body主体中创建一个div名为【a】， div class="a"DIV/div，如下图所示：

03

设置属性

然后设置div的属性，比如高度、宽度和颜色等等，如下图所示：

04

背景渐变色

然后设置背景渐变色，代码如下图：

background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#fff), to(#0000ff));

其中：linear-gradient()是用来创建线性渐变的语句。

05

预览效果

点击预览图标，在浏览器中的显示效果图如下所示：

网页背景颜色渐变代码

方式有两种，可以使用 CSS+图片 或 CSS+滤镜 实现，比如使用IE浏览器的Gradient 滤镜实现两个颜色（#FFFFFF/#3568CC）的渐变：

body style="filter:progid:DXImageTransform.Microsoft.Gradient

(startColorStr='#FFFFFF', endColorStr='#3568CC', gradientType='0')"

/body

网页渐变背景代码的介绍就聊到这里吧，感谢你花时间阅读本站内容，更多关于html背景图片渐变代码怎么写、网页渐变背景代码的信息别忘了在本站进行查找喔。