html中想要将背景颜色渐变怎么弄?

问题如上。... 问题如上。 展开
 我来答
幻想家爱休闲
高能答主

2019-05-28 · 分享休闲中的点点滴滴!
幻想家爱休闲
采纳数:1082 获赞数:266365

向TA提问 私信TA
展开全部

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背景渐变就成功了。

很多游戏
高粉答主

2019-05-28 · 游戏精通者,攻略技能点满
很多游戏
采纳数:91 获赞数:386999

向TA提问 私信TA
展开全部

1、打开编辑器,新建一个HTML,并定义一个div,并给50px的高度:

2、接下来在style中设置div的样式,这里使用linear-gradient()编写一个默认方向的红蓝渐变,渐变的方向可以省略的:

3、如果想设置渐变方向为从右至左,只需要给linear-gradient加一个“to left”属性就可以了:

4、保存文件查看生成的指定方向的渐变,可以看到浏览器中显示出红蓝的渐变色。以上就是用在html中设置渐变色的步骤:

本回答被网友采纳
已赞过 已踩过<
你对这个回答的评价是?
评论 收起
浪小客
高粉答主

2019-05-06 · 21世纪是需要思想碰撞的
浪小客
采纳数:1 获赞数:634910

向TA提问 私信TA
展开全部

1、由于我们要设置div渐变,我们首先需要使用div标签。

2、然后在header标签内设置<div>标签的css样式。

3、颜色渐变有一个范围,因此伙伴需要设置div的宽度和高度,即宽度和高度。

4、然后设置div的background属性,如图所示,背景颜色渐变使用-webkit-linear-gradient。

5、接下来,在-webkit-linear-gradient中写入顶部,从顶部到底部设置渐变。这里需要注意的是,如果你写的是顶部,不要写下底部。

6、之后,设置颜色的渐变顺序,例如,我将渐变从白色设置为蓝色。温馨提醒,颜色可以设置多个。

7、执行此操作后,div背景渐变成功。它是分层的效果。

本回答被网友采纳
已赞过 已踩过<
你对这个回答的评价是?
评论 收起
lyz810
推荐于2017-10-05 · 知道合伙人互联网行家
lyz810
知道合伙人互联网行家
采纳数:7531 获赞数:31777
前端开发工程师

向TA提问 私信TA
展开全部

可以在下面的网站创建自己的渐变色背景

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%)';
本回答被提问者和网友采纳
已赞过 已踩过<
你对这个回答的评价是?
评论 收起
阿贤书桌
推荐于2017-10-06 · TA获得超过243个赞
知道小有建树答主
回答量:162
采纳率:100%
帮助的人:73.6万
展开全部
通过使用 css3 渐变可以让背景两个或多个指定的颜色之间显示平稳的过渡,由于用到css3所以需要考虑下浏览器兼容问题,例如:
从左到右的线性渐变,且带有透明度的样式:
#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为不透明。
已赞过 已踩过<
你对这个回答的评价是?
评论 收起
收起 更多回答(5)
推荐律师服务: 若未解决您的问题,请您详细描述您的问题,通过百度律临进行免费专业咨询

为你推荐:

下载百度知道APP,抢鲜体验
使用百度知道APP,立即抢鲜体验。你的手机镜头里或许有别人想知道的答案。
扫描二维码下载
×

类别

我们会通过消息、邮箱等方式尽快将举报结果通知您。

说明

0/200

提交
取消

辅 助

模 式