在html中设置网页背景颜色_懂视

在html中设置网页背景颜色

2020-03-03 12:17:11 责编:小OO

这个只需要一行代码就可以解决了，background即可添加颜色下面我们来说下具体的添加方法：首先在css文件或者html标签内输入"background-color:red"即可,其中background表示背景,color表示颜色,冒号后面的red表示颜色,我们如果想换个绿色背景,

本文我们将从以下几个部分来详细介绍如何在HTML中设置网页背景颜色：设置单色背景、用图片当背景、设置渐变背景、设置会自动变色的背景、7 参考

想在HTML中设置网页背景颜色，你只用在<style></style>标签中的“body”元素做些简单的更改就行了。根据你想要的效果，这些步骤会略有不同。本文会教你如何设置单色背景、图片背景、渐变背景或动态变色背景。 第一部分：设置单色背景

使用background-color属性，可以直接在body标签里设置，也可以在css中设置。 ①：在body标签里面设置： ②：在css中设置： body{background-color:red;}

第1步：用你常用的文本编辑器打开HTML文件。

想要设置HTML的背景颜色，只要改变body的bgcolor属性就可以，不过要注意颜色与文本颜色的搭配不然太难看了；还可以设置背景为图片样式的，需要用到background属性，注意文件路径如果和网页在一个文件夹内只要写图片名字，不然请写全。如果图

从HTML5开始就不再支持<bgcolor>属性了。你想设置背景颜色和网页其它方面的样式，就得使用CSS。

首先打开电脑上自带的记事本程序，然后输入html网页基本结构语句。由于css样式必须在标签之间，因此我们点击后面，输入标签。在head标签之间输入样式标签,然后定义一些属性，例如 body {background-color: yellow} 定义网页背景色为； h1

第2步：在文件中添加<style></style>标签。

html中设置元素的背景色都是通过CSS中的background 属性来完成。例如，给整个页面（body）设置背景色：body{background: #ddd;}；如果要将图片作为背景色：body{background-image: url(1.jpg);}，其中url括号后面的是背景图片的链接。拓展资料

网页所有样式信息都应该编写在这两个标签之中，包括背景颜色。如果文件已经有了<style>标签，你只需要滚动到有关部分。

打开Adobe Dreamweaver，新建一个HTML网页文件. 网页的一般结构，首先是DOCTYPE声明，然后是头部标签,文档的主体..标签，我们需要设置网页背景，直接设置标签的背景就行了。点击右边的所有规则，新建一条规则，在弹出的界面，选择器类型为标

<!DOCTYPE html><html><head><style></style></head></html>

1、打开html开发工具，新建一个html文件在html代码页面创建一个并给这个标签添加一个类名linear： 2、然后为类设置样式。在title后面创建一个style标签，然后在这个标签里面设置linear类的高、渐变（linear-gradient）的样式，这里的第一个参数

第3步：在<style></style>标签中输入“body”元素。

html中将背景颜色渐变步骤如下： 1、先使用一个div标签。 2、然后在header标签里面设置标签的css样式。 3、颜色渐变要有一个范围，需要给div设定width和height，也就是宽度和高度。 4、然后设定div的background背景属性，如图所示，背景颜色渐变

你在这里面编写的所有信息会影响整个网页。

无标题文档 window.onload=function(){ var _span=document.getElementsByTagName(span); var CBody=document.getElementsByTagName(body)[0]; _span[0].onclick=function(){ CBody.style.background="#CCE8CF"; } _span[1].onclick=functi

<!DOCTYPE html><html><head><style>body { }</style></head><body></body></html>

第4步：在“body”元素中添加“background-color”属性。

body里面black和#000和#000000和rgb(0,0,0)是等价的，都能使网页背景变成黑色，设置的时候选择一种你会的方法即可

在这个情况中，有效属性只有“color”，千万不要输入“colour”。

方法有很多~建议多看看相关教程! 最简单的设置背景颜色: 找到标记,在里面打个空格输入bgcolor="这里写颜色的英文,也可以是16进制,如"#0099FF". 想插背景图片输background="这里是图片地址" 若要改文字颜色.在文字两端加标记,在里面输入color="写

<!DOCTYPE html><html><head><style>body { background-color: }</style></head><body></body></html>

问题分析： HTML的标签可以使用CSS的background-color来设置背景颜色以及透明度。举例如下：以下示例将分别演示不透明、50%透明度以及20%透明度的三种不同效果。 HTML代码：我是黑色背景，不透明的。我是黑色背景，50%透明度。我是黑色背景

第5步：在“background-color”属性中输入你想要的背景颜色。

因为“background: #00FF00”后面没有添加“;”符号，浏览器将“background”解析成了“background: #00FF00 font-size:80px;”，所以背景和字体大小不能同时作用。 1、新建html文档，在body标签中添加一些p标签，这时网页中将会输出p标签默认的背景颜色

你可以输入颜色名称，比如green、blue、red等，也可以使用16进制颜色代码，比如#000000是黑色、#ff0000是红色等。你还可以输入RGB颜色值，比如rgb(255,255,0)是。下面的例子使用16进制代码，网页背景颜色会和wikiHow网站横幅一样：

img{ filter: alpha(opacity=50); opacity:0.5; } 透明度前者对于火狐是百分之50 ，对于IE来说是 0.5 一个效果想改低或者高的话直接改数字就可以了

<!DOCTYPE html><html><head><style>body { background-color: #93B874;}</style></head><body></body></html>

首先，你的代码布局肯定是有问题的，除了第一张图后面的导航栏位置全都有问题。第二：搜狗浏览器我没有，但是不应该出现这样的情况第三：由于html上style设置的颜色是高于css代码里的，所以你说的显示之前的颜色应该就是这个问题，至于你说的f

白色： #FFFFFF

font-size:12px; 。一、认识CSS 颜色（CSS color）这里要介绍的是网页设置颜色包含有哪些；网页颜色规定规范。 1、常用颜色地方包含：字体颜色、超链接颜色、网页背景颜色、边框颜色。2、颜色规范与颜色规定：网页使用RGB模式颜色。二、颜色

淡粉红色：#FFCCE6

Web前端开发技术主要包括三个要素：HTML、CSS和JavaScript！它要求前端开发工程师不仅要掌握基本的Web前端开发技术，网站性能优化、SEO和服务器端的基础知识，而且要学会运用各种工具进行辅助开发以及理论层面的知识，包括代码的可维护性、组

红褐色：#993300

1、首先我们选择鼠标单击创建一个新的html文件项目。 2、之后选择键盘敲击代码使用＃色值创建p-tag和背景颜色的选项。 3、会跳出一个页面的显示结果，预览效果如图所示。 4、之后选择键盘敲代码创建p标签和背景颜色以英语设置背景颜色。 5、接着

靛蓝色：#4B0082

body { background-color: green; }一般是改样式表css

紫罗兰色：#EE82EE

通过css：background-image语句设置背景。 background-image 属性会在元素的背景中设置一个图像。根据 background-repeat 属性的值，图像可以无限平铺、沿着某个轴（x 轴或 y 轴）平铺，或者根本不平铺。初始背景图像（原图像）根据 background-

w3school网站的HTML颜色名列表罗列了各种颜色的16进制代码。你可以在这里参考你要的颜色。

在设计里设置会比较简单，单击网页背景，底下属性栏会有背景图标，图标右下角选择你要的颜色，也可直接在后面输入颜色代码

第6步：利用“background-color”设置其它元素的背景色。

frameset里面加不了背景颜色，你只能是给相应的页面添加颜色，而且frameset里面不能用body

在body元素用“background-color”设置网页背景色时，你还可以定义其它元素的背景色。在<style></style>标签中的background-color属性加上这些元素就可以了。

直接通过设置backgroundColor的颜色即可： function changeStyle() { var x=document.getElementById("myframe"); var y=(x.contentWindow || x.contentDocument); if (y.document)y=y.document; y.body.style.backgroundColor="#0000ff"; } You

<!DOCTYPE html><html><head><style>body { background-color: #93B874;}h1 { background-color: orange;}p { background-color: rgb(255,0,0);}</style></head><body><h1>网页标题区的背景会是橙色的</h1><p>这个段落的背景颜色会是红色背景色</p></body></html>

假如：h1标题。 h1{ background:#f00;/*背景颜色红色*/ font-size:18px;/*字体大小18px*/ color:#000;/*字体颜色黑色*/ } 自己可以尝试一下，也可以继续追问。

第二部分：用图片当背景

第1步：在文本编辑器打开HTML文件。

许多人比较喜欢用图片当网站背景。你可以使用任何图片、照片、图案或纹理。从HTML5开始，所有类型的背景都必须用CSS（层叠样式表）的<style></style>标签设置。

第2步：在文件中添加<style></style>标签。

网页所有样式信息都应该编写在这两个标签之中，包括背景颜色。如果文件已经有了<style>标签，你只需要滚动到有关部分。

<!DOCTYPE html><html><head><style></style></head></html>

第3步：在<style></style>标签中输入“body”元素。

你在这里面编写的所有信息会影响整个网页。

<!DOCTYPE html><html><head><style>body { }</style></head><body></body></html>

第4步：在“body”元素中添加“background-image”属性。

你需要输入图像文件名。图像文件一定和HTML文件同在一个文件夹里，或者你可以输入有关图片的完整网址。

<!DOCTYPE html><html><head><style>body { background-image: 网址（"imagename.png"）, background-color: #93B874;}</style></head><body></body></html>

最好再多加一个background-color属性，万一背景图片加载失败，网页背景也不至于是空白的。

第5步：使用多张图片，实现多层背景效果。

你可以将多张图片叠加在一起。如果你的图片是透明背景，叠加在一起可以相互补充，那么这种方法很适合你。

<!DOCTYPE html><html><head><style>body { background-image: 网址（"image1.png"）, 网址（"image2.gif"）; background-color: #93B874;}</style></head><body></body></html>

第一个图片会出现在最上方，第二个图片会出现在第一个图片的后面。

第三部分：设置渐变背景

第1步：用CSS设置渐变背景。

你觉得单色背景太单调了，想要更独具一格，但又不想要自动变色背景那样让人眼花缭乱？那不妨试一试渐变背景吧。渐变指的是从一个色彩缓慢过渡到另一个色彩。你可以用CSS创造和自定义你想要的渐变效果。在这之前，你得先了解CSS的基本概念。

第2步：了解基本语法。

创造渐变效果时，你需要设置两个参数，也就是起始点或角度，还有要产生渐变过渡效果的颜色。你可以选择多个颜色进行渐变，并设置渐变方向或角度。

background: linear-gradient(方向或角度，颜色1，颜色2，颜色3等);

第3步：实现垂直渐变。

如果你没有指定方向，颜色会从上往下渐变。不同的浏览器在实现渐变效果时会有些不同，所以你需要涵盖几个版本的编码。

<!DOCTYPE html><html><head><style>html { min-height: 100%; /*你需要设置这个参数，确保渐变效果填满整个页面，不会被切断*/}body { /* Chrome 10+, Safari 5.1+ */ background: -webkit-linear-gradient(#93B874, #C9DCB9); /* Opera 11.1+ */ background: -o-linear-gradient(#93B874, #C9DCB9); /* Firefox 3.6+ */ background: -moz-linear-gradient(#93B874, #C9DCB9); /* 标准语法（一定要放在最后）*/ background: linear-gradient(#93B874, #C9DCB9); /*最好设置一个背景颜色，万一渐变效果加载失败，背景也不会是空白的*/ background-color: #93B874; }</style></head><body></body></html>

第4步：实现定向渐变。

你可以通过添加渐变方向改变颜色渐变的方式。注意，不同的浏览器诠释方向的方式也不一样。下面的例子会在不同的浏览器产生相同的渐变效果。

<!DOCTYPE html><html><head><style>html { min-height: 100%;}body { /* 从左到右 */ background: -webkit-linear-gradient(left, #93B874, #C9DCB9); /* 在右边终止 */ background: -o-linear-gradient(right, #93B874, #C9DCB9); /* 在右边终止 */ background: -moz-linear-gradient(right, #93B874, #C9DCB9); /* 往右 */ background: linear-gradient(to right, #93B874, #C9DCB9); /* 最好设置一个背景颜色，万一渐变效果加载失败，背景也不会是空白的 */ background-color: #93B874;}</style></head><body></body></html>

第5步：用其它属性调整渐变效果。

你还可以做更多更复杂的渐变效果。

举个例子，你不但可以添加2种以上的颜色，还能在每种颜色后面加上百分比，设置每种颜色的间距。

background: linear-gradient(#93B874 10%, #C9DCB9 70%, #000000 90%);

给颜色添加透明效果。这会让颜色慢慢褪去。让同一种颜色从彩色变成完全透明。你需要用rgba()功能定义颜色。最后一个值表示透明度，0是完全不透明，1是完全透明。

background: linear-gradient(to right, rgba(147,184,116,0), rgba(147,184,116,1));

第四部分：设置会自动变色的背景

第1步：找到HTML编码的<style>部分。

如果你不喜欢单色背景，那就试一试这个自动变色的背景吧。从HTML5开始，背景颜色必须用CSS（层叠样式表）定义。如果你从未用CSS设置过背景颜色，在尝试这个方法之前，先参看单色背景。

第2步：在“body”元素添加animation属性。

你需要添加两个不同的属性，因为不同的浏览器用的编码不一样。

<!DOCTYPE html><html><head><style>body { -webkit-animation: colorchange 60s infinite; animation: colorchange 60s infinite; }</style></head><body></body></html>

-webkit-animation属性用在基于Chromium的浏览器，比如Chrome、Opera和Safari。animation属性则是其它浏览器的标准语法。

colorchange是在这个例子中的动画效果。

60s是动画效果或过渡的时长，也就是60秒。webkit和标准语法都要设置时长。

infinite 表示一直重复动画效果。如果你只想要各种颜色循环一次，然后停在最后一个颜色，那就跳过这个部分。

第3步：在animation属性中添加颜色。

现在你将用@keyframes规则设置要循环的背景颜色，和每种颜色出现的时长。不同的浏览器用的编码不一样，你需要输入两套编码。

<!DOCTYPE html><html><head><style>body { -webkit-animation: colorchange 60s infinite; animation: colorchange 60s infinite;}@-webkit-keyframes colorchange { 0% {background: #33FFF3;} 25% {background: #78281F;} 50% {background: #117A65;} 75% {background: #DC7633;} 100% {background: #9B59B6;}}@keyframes colorchange { 0% {background: #33FFF3;} 25% {background: #78281F;} 50% {background: #117A65;} 75% {background: #DC7633;} 100% {background: #9B59B6;}} </style></head><body></body></html>

注意，@-webkit-keyframes和@keyframes这两个规则有相同的背景颜色和百分比。你需要确保所有参数一致，这样不管用哪一种浏览器打开网页，都有一样的浏览体验。

0%、25%等百分比指的是动画总时长60s的百分比。页面加载时，背景颜色是你在0%设置的#33FFF3。一旦动画进行到60秒的25%，背景会变成#78281F，以此类推。

你可以修改时间和颜色，得到你想要的效果。

参考

https://developer.mozilla.org/en-US/docs/Web/CSS/background-color

http://www.w3schools.com/css/css_background.asp

http://www.w3schools.com/cssref/pr_background-image.asp

https://css-tricks.com/css3-gradients/

http://www.w3schools.com/css/css3_gradients.asp

https://codepen.io/metagrapher/pen/tgcLl

http://www.w3schools.com/css/css3_animations.asp

扩展阅读，以下内容您可能还感兴趣。

html中怎么动态实现网页背景颜色的转换！比如下图有三种背景颜色可以选择，通过点击相应东西改变背景颜色

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

<title>无标题文档</title>

window.onload=function(){

var _span=document.getElementsByTagName('span');

var CBody=document.getElementsByTagName('body')[0];

_span[0].onclick=function(){

CBody.style.background="#CCE8CF";

}

_span[1].onclick=function(){

CBody.style.background="#FFFFE1";

}

_span[2].onclick=function(){

CBody.style.background="#FFFFFF";

}

</script>

</head>

<body>

</body>

</html>

这是完整的代码，我只是给你加了<script></script>中的内容，也就是js代码，自己看下，不懂的还可以问我。

html怎么设置背景颜色和怎么添加图片

<!DOCTYPE html>

<html>

<head>

</head>

<body>

</html>

body里面black和#000和#000000和rgb(0,0,0)是等价的，都能使网页背景变成黑色，设置的时候选择一种你会的方法即可

更多追问追答追问为什么不行？完全照你说的做了追答我完全没看出来你怎么完全按照我说的做了 body的关闭标签都错了

你看看这段代码吧，你想引用本地图片得看路径，你现在连网络图片都不会引用

html怎样设置字体的背景颜色?

方法有很多~建议多看看相关教程!

最简单的设置背景颜色:

找到<body>标记,在里面打个空格输入bgcolor="这里写颜色的英文,也可以是16进制,如"#0099FF".

想插背景图片输background="这里是图片地址"

若要改文字颜色.在文字两端加<font>标记,在里面输入color="写英文或16进制,同上!"

整体效果:

<font color="#0099FF" size="1">这里是文字</font> //后面的size控制字体大小

若想用样式控制,全部代码如下:

<html>

<head>

<!-- //这是防止浏览器无法识别用的!不用管

body {

background-color: #0033FF;

} //背景颜色样式,采用标签选择符样式

.font{color: #33CC00}

//字体颜色样式,采用类选择符样式,用class 调用

-->

</style>

</head>

<body> //这里调用标签选择符样式

<span class="font">字体的颜色</span> //这里调用类选择符样式

</body>

</html>

HTML如何给背景颜色设置透明度

问题分析：

HTML的标签可以使用CSS的background-color来设置背景颜色以及透明度。

举例如下：

以下示例将分别演示不透明、50%透明度以及20%透明度的三种不同效果。

HTML代码：

我是黑色背景，不透明的。

</div>

我是黑色背景，50%透明度。

</div>

我是黑色背景，20%透明度。

</div>

CSS代码：

#test-1, #test-2, #test-3{

width: 300px;

height: 200px;

line-height: 200px;

text-align: center;

display: inline-block;

margin-left: 50px;

color: #FFF;

}

#test-1{

background-color: rgba(0,0,0,1);

}

#test-2{

background-color: rgba(0,0,0,0.5);

}

#test-3{

background-color: rgba(0,0,0,0.2);

}

页面初始化效果：

css中如何同时设置网页中<p>中的字体大小及背景颜色

因为“background: #00FF00”后面没有添加“;”符号，浏览器将“background”解析成了“background: #00FF00 font-size:80px;”，所以背景和字体大小不能同时作用。

1、新建html文档，在body标签中添加一些p标签，这时网页中将会输出p标签默认的背景颜色和字体大小：

2、为p标签设置“background”属性，属性值为颜色，这时p标签的背景颜色将会变成之前设置的颜色：

3、为p标签设置“font-size”属性，属性值为字体大小，这时p标签的字体大小将会变成之前设置的字体大小：

声明：本文由用户丘比特上传分享，本网页内容旨在传播知识，若有侵权等问题请及时与本网联系，我们将在第一时间删除处理。TEL:177 7030 7066 E-MAIL:11247931@qq.com

显示全文

全部频道