html中想要将背景颜色渐变怎么弄?
发布网友
发布时间：2022-04-23 13:24
共7个回答
热心网友
时间：2022-04-06 12:38
html中将背景颜色渐变步骤如下：
1、先使用一个div标签。
2、然后在header标签里面设置<div>标签的css样式。
3、颜色渐变要有一个范围，需要给div设定width和height，也就是宽度和高度。
4、然后设定div的background背景属性，如图所示，背景颜色渐变就用到-webkit-linear-gradient。
5、接着，在-webkit-linear-gradient里面写top，设定渐变从顶部开始，到底部结束。
6、再设定颜色的渐变顺序，比如我设置了从白色渐变到蓝色。
7、做完这些之后，div背景渐变就成功了。
热心网友
时间：2022-04-06 13:56
1、打开编辑器，新建一个HTML，并定义一个div，并给50px的高度：
2、接下来在style中设置div的样式，这里使用linear-gradient()编写一个默认方向的红蓝渐变，渐变的方向可以省略的：
3、如果想设置渐变方向为从右至左，只需要给linear-gradient加一个“to left”属性就可以了：
4、保存文件查看生成的指定方向的渐变，可以看到浏览器中显示出红蓝的渐变色。以上就是用在html中设置渐变色的步骤：
热心网友
时间：2022-04-06 15:31
1、由于我们要设置div渐变，我们首先需要使用div标签。
2、然后在header标签内设置<div>标签的css样式。
3、颜色渐变有一个范围，因此伙伴需要设置div的宽度和高度，即宽度和高度。
4、然后设置div的background属性，如图所示，背景颜色渐变使用-webkit-linear-gradient。
5、接下来，在-webkit-linear-gradient中写入顶部，从顶部到底部设置渐变。这里需要注意的是，如果你写的是顶部，不要写下底部。
6、之后，设置颜色的渐变顺序，例如，我将渐变从白色设置为蓝色。温馨提醒，颜色可以设置多个。
7、执行此操作后，div背景渐变成功。它是分层的效果。
热心网友
时间：2022-04-06 17:22
这是IE的代码
body
{
filter:progid:DXImageTransform.Microsoft.gradient(startcolorstr=red,endcolorstr=blue,gradientType=1);
}
代码主要有三个参数，依次是：startcolorstr, endcolorstr, 以及gradientType。
其中gradientType=1代表横向渐变，gradientType=0代表纵向淅变。startcolorstr=”色彩” 代表渐变渐变起始的色彩，endcolorstr=”色彩” 代表渐变结尾的色彩。
Firefox或是Safari浏览器的代码：
filter:alpha(opacity=100 finishopacity=0 style=1 startx=0,starty=5,finishx=90,finishy=60)
opacity表示透明度，默认的范围是从0 到 100，finishopacity 是一个可选参数，如果想要设置渐变的透明效果，就可以使用他们来指定结束时的透明度。范围也是0 到 100。style用来指定透明区域的形状特征：0 代表统一形状，1 代表线形，2 代表放射状，3 代表矩形。startx 渐变透明效果开始处的 X坐标。 starty 渐变透明效果开始处的 Y坐标。 finishx 渐变透明效果结束处的 X坐标。 finishy 渐变透明效果结束处的 Y坐标。
自己试试，这些都是网上有的，我试过，还可以，但是要比较新的浏览器，IE要IE8以上吧。谷歌浏览器还好点。我觉得为了IE8以下的浏览器也能有渐变的效果还是用图片比较好，毕竟还有很多人用IE6、IE7的
热心网友
时间：2022-04-06 19:30
可以在下面的网站创建自己的渐变色背景
http://colorzilla.com/gradient-editor/需要支持IE的话就把IE勾上，颜色可以自己调，跟PS差不多，生成的css类似如下
background: rgb(30,87,153); /* Old browsers *//* IE9 SVG, needs conditional override of 'filter' to 'none' */
background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPHJhZGlhbEdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgY3g9IjUwJSIgY3k9IjUwJSIgcj0iNzUlIj4KICAgIDxzdG9wIG9mZnNldD0iMCUiIHN0b3AtY29sb3I9IiMxZTU3OTkiIHN0b3Atb3BhY2l0eT0iMSIvPgogICAgPHN0b3Agb2Zmc2V0PSI0OSUiIHN0b3AtY29sb3I9IiMyOTg5ZDgiIHN0b3Atb3BhY2l0eT0iMSIvPgogICAgPHN0b3Agb2Zmc2V0PSI1MSUiIHN0b3AtY29sb3I9IiMyMDdjY2EiIHN0b3Atb3BhY2l0eT0iMSIvPgogICAgPHN0b3Agb2Zmc2V0PSIxMDAlIiBzdG9wLWNvbG9yPSIjN2RiOWU4IiBzdG9wLW9wYWNpdHk9IjEiLz4KICA8L3JhZGlhbEdyYWRpZW50PgogIDxyZWN0IHg9Ii01MCIgeT0iLTUwIiB3aWR0aD0iMTAxIiBoZWlnaHQ9IjEwMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
background: -moz-radial-gradient(center, ellipse cover, rgba(30,87,153,1) 0%, rgba(41,137,216,1) 49%, rgba(32,124,202,1) 51%, rgba(125,185,232,1) 100%); /* FF3.6+ */
background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,rgba(30,87,153,1)), color-stop(49%,rgba(41,137,216,1)), color-stop(51%,rgba(32,124,202,1)), color-stop(100%,rgba(125,185,232,1))); /* Chrome,Safari4+ */
background: -webkit-radial-gradient(center, ellipse cover, rgba(30,87,153,1) 0%,rgba(41,137,216,1) 49%,rgba(32,124,202,1) 51%,rgba(125,185,232,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-radial-gradient(center, ellipse cover, rgba(30,87,153,1) 0%,rgba(41,137,216,1) 49%,rgba(32,124,202,1) 51%,rgba(125,185,232,1) 100%); /* Opera 12+ */
background: -ms-radial-gradient(center, ellipse cover, rgba(30,87,153,1) 0%,rgba(41,137,216,1) 49%,rgba(32,124,202,1) 51%,rgba(125,185,232,1) 100%); /* IE10+ */
background: radial-gradient(ellipse at center, rgba(30,87,153,1) 0%,rgba(41,137,216,1) 49%,rgba(32,124,202,1) 51%,rgba(125,185,232,1) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1e5799', endColorstr='#7db9e8',GradientType=1 ); /* IE6-8 fallback on horizontal gradient */
追问没弄懂，我想需要一条语句来控制他。
追答
把上面的10行css放到class里，如放到.background里，然后用js控制是否显示背景色
$('body').addClass('background');$('body').removeClass('background);
如果只是兼容一种浏览器可以直接改变元素的style属性，如：
document.getElementById('element').style.background = 'radial-gradient(ellipse at center, rgba(30,87,153,1) 0%,rgba(41,137,216,1) 49%,rgba(32,124,202,1) 51%,rgba(125,185,232,1) 100%)';
热心网友
时间：2022-04-06 21:55
热心网友
时间：2022-04-07 00:36
从左到右的线性渐变，且带有透明度的样式：
#grad {
background: -webkit-linear-gradient(left,rgba(255,0,0,0),rgba(255,0,0,1)); /* Safari 5.1 - 6 */
background: -o-linear-gradient(right,rgba(255,0,0,0),rgba(255,0,0,1)); /* Opera 11.1 - 12*/
background: -moz-linear-gradient(right,rgba(255,0,0,0),rgba(255,0,0,1)); /* Firefox 3.6 - 15*/
background: linear-gradient(to right, rgba(255,0,0,0), rgba(255,0,0,1)); /* 标准的语法 */
}
其中rgba()中的4个数字，前3个为颜色rgb，最后1个是透明度，取值0-1，0为透明,1为不透明。
