當(dāng)前位置：首頁 - 手機(jī) - 正文

在html中設(shè)置網(wǎng)頁背景顏色

來源：懂視網(wǎng) 責(zé)編：小OO 時(shí)間：2020-03-03 12:17:11

導(dǎo)讀在html中設(shè)置網(wǎng)頁背景顏色，這個(gè)只需要一行代碼就可以解決了，background即可添加顏色下面我們來說下具體的添加方法：首先在css文件或者h(yuǎn)tml標(biāo)簽內(nèi)輸入"background-color:red"即可,其中background表示背景,color表示顏色,冒號(hào)后面的red表示顏色,我們?nèi)绻霌Q個(gè)綠色背景,本文我們將從以下幾個(gè)部分來詳細(xì)介紹如何在HTML中設(shè)置網(wǎng)頁背景顏色：設(shè)置單

這個(gè)只需要一行代碼就可以解決了，background即可添加顏色下面我們來說下具體的添加方法：首先在css文件或者h(yuǎn)tml標(biāo)簽內(nèi)輸入"background-color:red"即可,其中background表示背景,color表示顏色,冒號(hào)后面的red表示顏色,我們?nèi)绻霌Q個(gè)綠色背景,

本文我們將從以下幾個(gè)部分來詳細(xì)介紹如何在HTML中設(shè)置網(wǎng)頁背景顏色：設(shè)置單色背景、用圖片當(dāng)背景、設(shè)置漸變背景、設(shè)置會(huì)自動(dòng)變色的背景、7 參考

想在HTML中設(shè)置網(wǎng)頁背景顏色，你只用在<style></style>標(biāo)簽中的“body”元素做些簡單的更改就行了。根據(jù)你想要的效果，這些步驟會(huì)略有不同。本文會(huì)教你如何設(shè)置單色背景、圖片背景、漸變背景或動(dòng)態(tài)變色背景。 第一部分：設(shè)置單色背景

使用background-color屬性，可以直接在body標(biāo)簽里設(shè)置，也可以在css中設(shè)置。 ①：在body標(biāo)簽里面設(shè)置： ②：在css中設(shè)置： body{background-color:red;}

第1步：用你常用的文本編輯器打開HTML文件。

想要設(shè)置HTML的背景顏色，只要改變body的bgcolor屬性就可以，不過要注意顏色與文本顏色的搭配不然太難看了；還可以設(shè)置背景為圖片樣式的，需要用到background屬性，注意文件路徑如果和網(wǎng)頁在一個(gè)文件夾內(nèi)只要寫圖片名字，不然請(qǐng)寫全。如果圖

從HTML5開始就不再支持<bgcolor>屬性了。你想設(shè)置背景顏色和網(wǎng)頁其它方面的樣式，就得使用CSS。

首先打開電腦上自帶的記事本程序，然后輸入html網(wǎng)頁基本結(jié)構(gòu)語句。由于css樣式必須在標(biāo)簽之間，因此我們點(diǎn)擊后面，輸入標(biāo)簽。在head標(biāo)簽之間輸入樣式標(biāo)簽,然后定義一些屬性，例如 body {background-color: yellow} 定義網(wǎng)頁背景色為； h1

第2步：在文件中添加<style></style>標(biāo)簽。

html中設(shè)置元素的背景色都是通過CSS中的background 屬性來完成。例如，給整個(gè)頁面（body）設(shè)置背景色：body{background: #ddd;}；如果要將圖片作為背景色：body{background-image: url(1.jpg);}，其中url括號(hào)后面的是背景圖片的鏈接。拓展資料

網(wǎng)頁所有樣式信息都應(yīng)該編寫在這兩個(gè)標(biāo)簽之中，包括背景顏色。如果文件已經(jīng)有了<style>標(biāo)簽，你只需要滾動(dòng)到有關(guān)部分。

打開Adobe Dreamweaver，新建一個(gè)HTML網(wǎng)頁文件. 網(wǎng)頁的一般結(jié)構(gòu)，首先是DOCTYPE聲明，然后是頭部標(biāo)簽,文檔的主體..標(biāo)簽，我們需要設(shè)置網(wǎng)頁背景，直接設(shè)置標(biāo)簽的背景就行了。點(diǎn)擊右邊的所有規(guī)則，新建一條規(guī)則，在彈出的界面，選擇器類型為標(biāo)

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

1、打開html開發(fā)工具，新建一個(gè)html文件在html代碼頁面創(chuàng)建一個(gè)并給這個(gè)標(biāo)簽添加一個(gè)類名linear： 2、然后為類設(shè)置樣式。在title后面創(chuàng)建一個(gè)style標(biāo)簽，然后在這個(gè)標(biāo)簽里面設(shè)置linear類的高、漸變（linear-gradient）的樣式，這里的第一個(gè)參數(shù)

第3步：在<style></style>標(biāo)簽中輸入“body”元素。

html中將背景顏色漸變步驟如下： 1、先使用一個(gè)div標(biāo)簽。 2、然后在header標(biāo)簽里面設(shè)置標(biāo)簽的css樣式。 3、顏色漸變要有一個(gè)范圍，需要給div設(shè)定width和height，也就是寬度和高度。 4、然后設(shè)定div的background背景屬性，如圖所示，背景顏色漸變

你在這里面編寫的所有信息會(huì)影響整個(gè)網(wǎng)頁。

無標(biāo)題文檔 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>

無標(biāo)題文檔 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

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

body里面black和#000和#000000和rgb(0,0,0)是等價(jià)的，都能使網(wǎng)頁背景變成黑色，設(shè)置的時(shí)候選擇一種你會(huì)的方法即可

在這個(gè)情況中，有效屬性只有“color”，千萬不要輸入“colour”。

方法有很多~建議多看看相關(guān)教程! 最簡單的設(shè)置背景顏色: 找到標(biāo)記,在里面打個(gè)空格輸入bgcolor="這里寫顏色的英文,也可以是16進(jìn)制,如"#0099FF". 想插背景圖片輸background="這里是圖片地址" 若要改文字顏色.在文字兩端加標(biāo)記,在里面輸入color="寫

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

問題分析： HTML的標(biāo)簽可以使用CSS的background-color來設(shè)置背景顏色以及透明度。舉例如下：以下示例將分別演示不透明、50%透明度以及20%透明度的三種不同效果。 HTML代碼：我是黑色背景，不透明的。我是黑色背景，50%透明度。我是黑色背景

第5步：在“background-color”屬性中輸入你想要的背景顏色。

因?yàn)椤癰ackground: #00FF00”后面沒有添加“;”符號(hào)，瀏覽器將“background”解析成了“background: #00FF00 font-size:80px;”，所以背景和字體大小不能同時(shí)作用。 1、新建html文檔，在body標(biāo)簽中添加一些p標(biāo)簽，這時(shí)網(wǎng)頁中將會(huì)輸出p標(biāo)簽?zāi)J(rèn)的背景顏色

你可以輸入顏色名稱，比如green、blue、red等，也可以使用16進(jìn)制顏色代碼，比如#000000是黑色、#ff0000是紅色等。你還可以輸入RGB顏色值，比如rgb(255,255,0)是。下面的例子使用16進(jìn)制代碼，網(wǎng)頁背景顏色會(huì)和wikiHow網(wǎng)站橫幅一樣：

img{ filter: alpha(opacity=50); opacity:0.5; } 透明度前者對(duì)于火狐是百分之50 ，對(duì)于IE來說是 0.5 一個(gè)效果想改低或者高的話直接改數(shù)字就可以了

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

首先，你的代碼布局肯定是有問題的，除了第一張圖后面的導(dǎo)航欄位置全都有問題。第二：搜狗瀏覽器我沒有，但是不應(yīng)該出現(xiàn)這樣的情況第三：由于html上style設(shè)置的顏色是高于css代碼里的，所以你說的顯示之前的顏色應(yīng)該就是這個(gè)問題，至于你說的f

白色： #FFFFFF

font-size:12px; 。一、認(rèn)識(shí)CSS 顏色（CSS color）這里要介紹的是網(wǎng)頁設(shè)置顏色包含有哪些；網(wǎng)頁顏色規(guī)定規(guī)范。 1、常用顏色地方包含：字體顏色、超鏈接顏色、網(wǎng)頁背景顏色、邊框顏色。2、顏色規(guī)范與顏色規(guī)定：網(wǎng)頁使用RGB模式顏色。二、顏色

淡粉紅色：#FFCCE6

Web前端開發(fā)技術(shù)主要包括三個(gè)要素：HTML、CSS和JavaScript！它要求前端開發(fā)工程師不僅要掌握基本的Web前端開發(fā)技術(shù)，網(wǎng)站性能優(yōu)化、SEO和服務(wù)器端的基礎(chǔ)知識(shí)，而且要學(xué)會(huì)運(yùn)用各種工具進(jìn)行輔助開發(fā)以及理論層面的知識(shí)，包括代碼的可維護(hù)性、組

紅褐色：#993300

1、首先我們選擇鼠標(biāo)單擊創(chuàng)建一個(gè)新的html文件項(xiàng)目。 2、之后選擇鍵盤敲擊代碼使用＃色值創(chuàng)建p-tag和背景顏色的選項(xiàng)。 3、會(huì)跳出一個(gè)頁面的顯示結(jié)果，預(yù)覽效果如圖所示。 4、之后選擇鍵盤敲代碼創(chuàng)建p標(biāo)簽和背景顏色以英語設(shè)置背景顏色。 5、接著

靛藍(lán)色：#4B0082

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

紫羅蘭色：#EE82EE

通過css：background-image語句設(shè)置背景。 background-image 屬性會(huì)在元素的背景中設(shè)置一個(gè)圖像。根據(jù) background-repeat 屬性的值，圖像可以無限平鋪、沿著某個(gè)軸（x 軸或 y 軸）平鋪，或者根本不平鋪。初始背景圖像（原圖像）根據(jù) background-

w3school網(wǎng)站的HTML顏色名列表羅列了各種顏色的16進(jìn)制代碼。你可以在這里參考你要的顏色。

在設(shè)計(jì)里設(shè)置會(huì)比較簡單，單擊網(wǎng)頁背景，底下屬性欄會(huì)有背景圖標(biāo)，圖標(biāo)右下角選擇你要的顏色，也可直接在后面輸入顏色代碼

第6步：利用“background-color”設(shè)置其它元素的背景色。

frameset里面加不了背景顏色，你只能是給相應(yīng)的頁面添加顏色，而且frameset里面不能用body

在body元素用“background-color”設(shè)置網(wǎng)頁背景色時(shí)，你還可以定義其它元素的背景色。在<style></style>標(biāo)簽中的background-color屬性加上這些元素就可以了。

直接通過設(shè)置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>網(wǎng)頁標(biāo)題區(qū)的背景會(huì)是橙色的</h1><p>這個(gè)段落的背景顏色會(huì)是紅色背景色</p></body></html>

假如：h1標(biāo)題。 h1{ background:#f00;/*背景顏色紅色*/ font-size:18px;/*字體大小18px*/ color:#000;/*字體顏色黑色*/ } 自己可以嘗試一下，也可以繼續(xù)追問。

第二部分：用圖片當(dāng)背景

第1步：在文本編輯器打開HTML文件。

許多人比較喜歡用圖片當(dāng)網(wǎng)站背景。你可以使用任何圖片、照片、圖案或紋理。從HTML5開始，所有類型的背景都必須用CSS（層疊樣式表）的<style></style>標(biāo)簽設(shè)置。

第2步：在文件中添加<style></style>標(biāo)簽。

html中設(shè)置元素的背景色都是通過CSS中的background 屬性來完成。例如，給整個(gè)頁面（body）設(shè)置背景色：body{background: #ddd;}；如果要將圖片作為背景色：body{background-image: url(1.jpg);}，其中url括號(hào)后面的是背景圖片的鏈接。拓展資料

網(wǎng)頁所有樣式信息都應(yīng)該編寫在這兩個(gè)標(biāo)簽之中，包括背景顏色。如果文件已經(jīng)有了<style>標(biāo)簽，你只需要滾動(dòng)到有關(guān)部分。

打開Adobe Dreamweaver，新建一個(gè)HTML網(wǎng)頁文件. 網(wǎng)頁的一般結(jié)構(gòu)，首先是DOCTYPE聲明，然后是頭部標(biāo)簽,文檔的主體..標(biāo)簽，我們需要設(shè)置網(wǎng)頁背景，直接設(shè)置標(biāo)簽的背景就行了。點(diǎn)擊右邊的所有規(guī)則，新建一條規(guī)則，在彈出的界面，選擇器類型為標(biāo)

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

1、打開html開發(fā)工具，新建一個(gè)html文件在html代碼頁面創(chuàng)建一個(gè)并給這個(gè)標(biāo)簽添加一個(gè)類名linear： 2、然后為類設(shè)置樣式。在title后面創(chuàng)建一個(gè)style標(biāo)簽，然后在這個(gè)標(biāo)簽里面設(shè)置linear類的高、漸變（linear-gradient）的樣式，這里的第一個(gè)參數(shù)

第3步：在<style></style>標(biāo)簽中輸入“body”元素。

html中將背景顏色漸變步驟如下： 1、先使用一個(gè)div標(biāo)簽。 2、然后在header標(biāo)簽里面設(shè)置標(biāo)簽的css樣式。 3、顏色漸變要有一個(gè)范圍，需要給div設(shè)定width和height，也就是寬度和高度。 4、然后設(shè)定div的background背景屬性，如圖所示，背景顏色漸變

你在這里面編寫的所有信息會(huì)影響整個(gè)網(wǎng)頁。

無標(biāo)題文檔 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>

無標(biāo)題文檔 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

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

你需要輸入圖像文件名。圖像文件一定和HTML文件同在一個(gè)文件夾里，或者你可以輸入有關(guān)圖片的完整網(wǎng)址。

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

最好再多加一個(gè)background-color屬性，萬一背景圖片加載失敗，網(wǎng)頁背景也不至于是空白的。

第5步：使用多張圖片，實(shí)現(xiàn)多層背景效果。

你可以將多張圖片疊加在一起。如果你的圖片是透明背景，疊加在一起可以相互補(bǔ)充，那么這種方法很適合你。

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

第一個(gè)圖片會(huì)出現(xiàn)在最上方，第二個(gè)圖片會(huì)出現(xiàn)在第一個(gè)圖片的后面。

第三部分：設(shè)置漸變背景

第1步：用CSS設(shè)置漸變背景。

你覺得單色背景太單調(diào)了，想要更獨(dú)具一格，但又不想要自動(dòng)變色背景那樣讓人眼花繚亂？那不妨試一試漸變背景吧。漸變指的是從一個(gè)色彩緩慢過渡到另一個(gè)色彩。你可以用CSS創(chuàng)造和自定義你想要的漸變效果。在這之前，你得先了解CSS的基本概念。

第2步：了解基本語法。

創(chuàng)造漸變效果時(shí)，你需要設(shè)置兩個(gè)參數(shù)，也就是起始點(diǎn)或角度，還有要產(chǎn)生漸變過渡效果的顏色。你可以選擇多個(gè)顏色進(jìn)行漸變，并設(shè)置漸變方向或角度。

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

第3步：實(shí)現(xiàn)垂直漸變。

如果你沒有指定方向，顏色會(huì)從上往下漸變。不同的瀏覽器在實(shí)現(xiàn)漸變效果時(shí)會(huì)有些不同，所以你需要涵蓋幾個(gè)版本的編碼。

<!DOCTYPE html><html><head><style>html { min-height: 100%; /*你需要設(shè)置這個(gè)參數(shù)，確保漸變效果填滿整個(gè)頁面，不會(huì)被切斷*/}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); /* 標(biāo)準(zhǔn)語法（一定要放在最后）*/ background: linear-gradient(#93B874, #C9DCB9); /*最好設(shè)置一個(gè)背景顏色，萬一漸變效果加載失敗，背景也不會(huì)是空白的*/ background-color: #93B874; }</style></head><body></body></html>

第4步：實(shí)現(xiàn)定向漸變。

你可以通過添加漸變方向改變顏色漸變的方式。注意，不同的瀏覽器詮釋方向的方式也不一樣。下面的例子會(huì)在不同的瀏覽器產(chǎn)生相同的漸變效果。

<!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); /* 最好設(shè)置一個(gè)背景顏色，萬一漸變效果加載失敗，背景也不會(huì)是空白的 */ background-color: #93B874;}</style></head><body></body></html>

第5步：用其它屬性調(diào)整漸變效果。

你還可以做更多更復(fù)雜的漸變效果。

舉個(gè)例子，你不但可以添加2種以上的顏色，還能在每種顏色后面加上百分比，設(shè)置每種顏色的間距。

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

給顏色添加透明效果。這會(huì)讓顏色慢慢褪去。讓同一種顏色從彩色變成完全透明。你需要用rgba()功能定義顏色。最后一個(gè)值表示透明度，0是完全不透明，1是完全透明。

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

第四部分：設(shè)置會(huì)自動(dòng)變色的背景

第1步：找到HTML編碼的<style>部分。

如果你不喜歡單色背景，那就試一試這個(gè)自動(dòng)變色的背景吧。從HTML5開始，背景顏色必須用CSS（層疊樣式表）定義。如果你從未用CSS設(shè)置過背景顏色，在嘗試這個(gè)方法之前，先參看單色背景。

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

你需要添加兩個(gè)不同的屬性，因?yàn)椴煌臑g覽器用的編碼不一樣。

<!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屬性則是其它瀏覽器的標(biāo)準(zhǔn)語法。

colorchange是在這個(gè)例子中的動(dòng)畫效果。

60s是動(dòng)畫效果或過渡的時(shí)長，也就是60秒。webkit和標(biāo)準(zhǔn)語法都要設(shè)置時(shí)長。

infinite 表示一直重復(fù)動(dòng)畫效果。如果你只想要各種顏色循環(huán)一次，然后停在最后一個(gè)顏色，那就跳過這個(gè)部分。

第3步：在animation屬性中添加顏色。

現(xiàn)在你將用@keyframes規(guī)則設(shè)置要循環(huán)的背景顏色，和每種顏色出現(xiàn)的時(shí)長。不同的瀏覽器用的編碼不一樣，你需要輸入兩套編碼。

<!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這兩個(gè)規(guī)則有相同的背景顏色和百分比。你需要確保所有參數(shù)一致，這樣不管用哪一種瀏覽器打開網(wǎng)頁，都有一樣的瀏覽體驗(yàn)。

0%、25%等百分比指的是動(dòng)畫總時(shí)長60s的百分比。頁面加載時(shí)，背景顏色是你在0%設(shè)置的#33FFF3。一旦動(dòng)畫進(jìn)行到60秒的25%，背景會(huì)變成#78281F，以此類推。

你可以修改時(shí)間和顏色，得到你想要的效果。

參考

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

擴(kuò)展閱讀，以下內(nèi)容您可能還感興趣。

html中怎么動(dòng)態(tài)實(shí)現(xiàn)網(wǎng)頁背景顏色的轉(zhuǎn)換！比如下圖有三種背景顏色可以選擇，通過點(diǎn)擊相應(yīng)東西改變背景顏色

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

<head>

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>中的內(nèi)容，也就是js代碼，自己看下，不懂的還可以問我。

html怎么設(shè)置背景顏色和怎么添加圖片

<!DOCTYPE html>

<html>

<head>

</head>

<body>

</html>

body里面black和#000和#000000和rgb(0,0,0)是等價(jià)的，都能使網(wǎng)頁背景變成黑色，設(shè)置的時(shí)候選擇一種你會(huì)的方法即可

更多追問追答追問為什么不行？完全照你說的做了追答我完全沒看出來你怎么完全按照我說的做了 body的關(guān)閉標(biāo)簽都錯(cuò)了

你看看這段代碼吧，你想引用本地圖片得看路徑，你現(xiàn)在連網(wǎng)絡(luò)圖片都不會(huì)引用

html怎樣設(shè)置字體的背景顏色?

方法有很多~建議多看看相關(guān)教程!

最簡單的設(shè)置背景顏色:

找到<body>標(biāo)記,在里面打個(gè)空格輸入bgcolor="這里寫顏色的英文,也可以是16進(jìn)制,如"#0099FF".

想插背景圖片輸background="這里是圖片地址"

若要改文字顏色.在文字兩端加<font>標(biāo)記,在里面輸入color="寫英文或16進(jìn)制,同上!"

整體效果:

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

若想用樣式控制,全部代碼如下:

<html>

<head>

<!-- //這是防止瀏覽器無法識(shí)別用的!不用管

body {

background-color: #0033FF;

} //背景顏色樣式,采用標(biāo)簽選擇符樣式

.font{color: #33CC00}

//字體顏色樣式,采用類選擇符樣式,用class 調(diào)用

-->

</style>

</head>

<body> //這里調(diào)用標(biāo)簽選擇符樣式

<span class="font">字體的顏色</span> //這里調(diào)用類選擇符樣式

</body>

</html>

HTML如何給背景顏色設(shè)置透明度

問題分析：

HTML的標(biāo)簽可以使用CSS的background-color來設(shè)置背景顏色以及透明度。

舉例如下：

以下示例將分別演示不透明、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中如何同時(shí)設(shè)置網(wǎng)頁中<p>中的字體大小及背景顏色

因?yàn)椤癰ackground: #00FF00”后面沒有添加“;”符號(hào)，瀏覽器將“background”解析成了“background: #00FF00 font-size:80px;”，所以背景和字體大小不能同時(shí)作用。

1、新建html文檔，在body標(biāo)簽中添加一些p標(biāo)簽，這時(shí)網(wǎng)頁中將會(huì)輸出p標(biāo)簽?zāi)J(rèn)的背景顏色和字體大小：

2、為p標(biāo)簽設(shè)置“background”屬性，屬性值為顏色，這時(shí)p標(biāo)簽的背景顏色將會(huì)變成之前設(shè)置的顏色：

3、為p標(biāo)簽設(shè)置“font-size”屬性，屬性值為字體大小，這時(shí)p標(biāo)簽的字體大小將會(huì)變成之前設(shè)置的字體大小：

聲明：本網(wǎng)頁內(nèi)容旨在傳播知識(shí)，若有侵權(quán)等問題請(qǐng)及時(shí)與本網(wǎng)聯(lián)系，我們將在第一時(shí)間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com

標(biāo)簽：走路植物大戰(zhàn)僵尸2 襲擊

熱門焦點(diǎn)

做爰高潮a片〈毛片〉,尤物av天堂一区二区在线观看,一本久久A久久精品VR综合,添女人荫蒂全部过程av

在html中設(shè)置網(wǎng)頁背景顏色

最新推薦

猜你喜歡

熱門推薦