在html中,可以透過設定標籤元素的style屬性,加入「background-color:顏色值;」樣式來改變背景顏色,例如「
」。
本教學操作環境:windows7系統、CSS3&&HTML5版、Dell G3電腦。
html改變背景顏色
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> </head> <body style="background-color:red;"></body> </html>
效果圖:
說明:
background-color屬性設定一個元素的背景顏色。元素的背景是元素的總大小,包括填充和邊界(但不包括邊距)。
語法:
background-color:颜色值;
顏色值的多種寫法:
##1、使用顏色名稱
雖然目前已經命名的顏色約有184 種,但真正被各種瀏覽器支持,並且作為CSS 規範推薦的顏色名稱只有16 種,如下表所示。 表1:CSS 規格建議的顏色名稱/*名 称 颜 色 名 称 颜 色 名 称 颜 色 black 纯黑 silver 浅灰 navy 深蓝 blue 浅蓝 green 深绿 lime 浅绿 teal 靛青 aqua 天蓝 maroon 深红 red 大红 purple 深紫 fuchsia 品红 olive 褐黄 yellow 明黄 gray 深灰 white 壳白*/
2、十六進位顏色
十六進位符號 #RRGGBB 和 #RGB(例如 #ff0000)。 "#" 後面接著 6 位元或 3 位元十六進位字元(0-9, A-F)。 這是最常用的取色方法,例如:#f03 #F03 #ff0033 #FF0033
3、RGB,紅-綠-藍(red-green-blue (RGB))
規定顏色值為rgb 程式碼的顏色,函數格式為rgb(R,G,B),取值可以是0-255 的整數或百分比。rgb(255,0,51) rgb(255, 0, 51) rgb(100%,0%,20%) rgb(100%, 0%, 20%)
rgba(255,0,0,0.1) /* 10% 不透明 */ rgba(255,0,0,0.4) /* 40% 不透明 */ rgba(255,0,0,0.7) /* 70% 不透明 */ rgba(255,0,0, 1) /* 不透明,即红色 */
4、HSL,色相-飽和度-明度(Hue-saturation-lightness)
色相(Hue)表示色環(即代表彩虹的一個圓環)的一個角度。飽和度和明度由百分數表示。
100% 是滿飽和度,而 0% 是一種灰度。
100% 明度是白色, 0% 明度是黑色,而 50% 明度是"一般的"。
hsl(120,100%,25%) /* 深绿色 */ hsl(120,100%,50%) /* 绿色 */ hsl(120,100%,75%) /* 浅绿色 */
hsla(240,100%,50%,0.05) /* 5% 不透明 */ hsla(240,100%,50%, 0.4) /* 40% 不透明 */ hsla(240,100%,50%, 0.7) /* 70% 不透明 */ hsla(240,100%,50%, 1) /* 完全不透明 */
5、transparent
特殊顏色值,表示透明色。可以直接當做顏色使用。 例如:color:transparent 設定字體顏色為透明<style type="text/css"> body{background:hsl(270,100%,50%)} p{ font-size:50px; font-family:"黑体"; /*浏览器私有属性*/ -webkit-text-fill-color:transparent;/*设置文本透明*/ /*使用rgba(0,0,0,0);也可以实现全透明模式*/ -webkit-text-stroke:2px yellow;/*将文本设置透明,再设置个边框后就实现镂空字了*/ /*W3C标准属性*/ /*text-fill-color:transparent;*/ /*text-stroke:2px yellow;*/ } </style> <body> <p>2012年过去了,最忙的是元芳,你怎么看?</p> </body>
html影片教學、css影片教學#
以上是html怎麼改變背景顏色的詳細內容。更多資訊請關注PHP中文網其他相關文章!