背景色css
⑴ CSS背景圖和背景顏色同時設置,是什麼效果
圖片會覆蓋顏色,但如果圖片中存在透明色(GIF和PNG格式的圖片支持透明,JPG則不支持),則背景顏色會透過圖片的透明部分顯示出來;或者如果背景圖設置為不平鋪(no-repeat)且圖片比較小時,則未被圖片覆蓋的部分也會顯示出背景顏色。
⑵ 怎樣用css實現網頁背景顏色漸變
CSS3 漸變(gradients)可以讓你在兩個或多個指定的顏色之間顯示平穩的過渡。
CSS3 定義了兩種類型的漸變(gradients):線性漸變(Linear Gradients)- 向下/向上/向左/向右/對角方向與徑向漸變(Radial Gradients)- 由它們的中心定義
線性漸變:
3.1、從上到下的線性漸變:
#grad {
background: -webkit-linear-gradient(red, blue); /* Safari 5.1 - 6.0 */
background: -o-linear-gradient(red, blue); /* Opera 11.1 - 12.0 */
background: -moz-linear-gradient(red, blue); /* Firefox 3.6 - 15 */
background: linear-gradient(red, blue); /* 標準的語法 */
}
3.2、從左到右的線性漸變:
#grad {
background: -webkit-linear-gradient(left, red , blue); /* Safari 5.1 - 6.0 */
background: -o-linear-gradient(right, red, blue); /* Opera 11.1 - 12.0 */
background: -moz-linear-gradient(right, red, blue); /* Firefox 3.6 - 15 */
background: linear-gradient(to right, red , blue); /* 標準的語法 */
}
3.3、線性漸變 - 對角:
#grad {
background: -webkit-linear-gradient(left top, red , blue); /* Safari 5.1 - 6.0 */background: -o-linear-gradient(bottom right, red, blue); /* Opera 11.1 - 12.0 */background: -moz-linear-gradient(bottom right, red, blue); /* Firefox 3.6 - 15 */background: linear-gradient(to bottom right, red , blue); /* 標準的語法 */
}
4.徑向漸變:
4.1、顏色結點均勻分布的徑向漸變:
#grad {
background: -webkit-radial-gradient(red, green, blue); /* Safari 5.1 - 6.0 */background: -o-radial-gradient(red, green, blue); /* Opera 11.6 - 12.0 */
background: -moz-radial-gradient(red, green, blue); /* Firefox 3.6 - 15 */
background: radial-gradient(red, green, blue); /* 標準的語法 */
}
4.2、顏色結點不均勻分布的徑向漸變::
#grad {
background: -webkit-radial-gradient(red 5%, green 15%, blue 60%); /* Safari 5.1 - 6.0 */
background: -o-radial-gradient(red 5%, green 15%, blue 60%); /* Opera 11.6 - 12.0 */
background: -moz-radial-gradient(red 5%, green 15%, blue 60%); /* Firefox 3.6 - 15 */background: radial-gradient(red 5%, green 15%, blue 60%); /* 標準的語法 */
}
4.3、形狀為圓形的徑向漸變:
#grad {
background: -webkit-radial-gradient(circle, red, yellow, green); /* Safari 5.1 - 6.0 */background: -o-radial-gradient(circle, red, yellow, green); /* Opera 11.6 - 12.0 */background: -moz-radial-gradient(circle, red, yellow, green); /* Firefox 3.6 - 15 */background: radial-gradient(circle, red, yellow, green); /* 標準的語法 */
}
⑶ div+css背景顏色不顯示
那是因為前面的樣式沒有清除的原因,你只要家一行代碼就可以了,在你使用了float屬性的時候,為了不影響下面的樣式,記得要clear:both一下:
如下:
<div id="div1" style="width:670px; background:#ff0000;">
<div id="div2" style="width:330px; float:left">1111</div>
<div id="div3" style="width:330px; float:right">2222</div>
<div id="div4" style="clear:both;"></div>
</div>
⑷ css hover怎麼控制背景顏色大小
背景色取決於對應元素的大小,你可以在CSS中將U AND ME的span及a的寬高修改下,如
liaspan{display:inline-block;width:100px;height:50px}
改變寬高即可改變背景色區域
⑸ CSS裡面怎麼改變背景顏色
可以使用屬性background-color
⑹ 誰有完整的css背景顏色代碼
FFFFFF#DDDDDD#AAAAAA#888888#666666#444444#000000
#FFB7DD#FF88C2#FF44AA#FF0088#C10066#A20055#8C0044
#FFCCCC#FF8888#FF3333#FF0000#CC0000#AA0000#880000
#FFC8B4#FFA488#FF7744#FF5511#E63F00#C63300#A42D00
#FFDDAA#FFBB66#FFAA33#FF8800#EE7700#CC6600#BB5500
#FFEE99#FFDD55#FFCC22#FFBB00#DDAA00#AA7700#886600
#FFFFBB#FFFF77#FFFF33#FFFF00#EEEE00#BBBB00#888800
#EEFFBB#DDFF77#CCFF33#BBFF00#99DD00#88AA00#668800
#CCFF99#BBFF66#99FF33#77FF00#66DD00#55AA00#227700
#99FF99#66FF66#33FF33#00FF00#00DD00#00AA00#008800
#BBFFEE#77FFCC#33FFAA#00FF99#00DD77#00AA55#008844
#AAFFEE#77FFEE#33FFDD#00FFCC#00DDAA#00AA88#008866
#99FFFF#66FFFF#33FFFF#00FFFF#00DDDD#00AAAA#008888
#CCEEFF#77DDFF#33CCFF#00BBFF#009FCC#0088A8#007799
#CCDDFF#99BBFF#5599FF#0066FF#0044BB#003C9D#003377
#CCCCFF#9999FF#5555FF#0000FF#0000CC#0000AA#000088
#CCBBFF#9F88FF#7744FF#5500FF#4400CC#2200AA#220088
#D1BBFF#B088FF#9955FF#7700FF#5500DD#4400B3#3A0088
#E8CCFF#D28EFF#B94FFF#9900FF#7700BB#66009D#550088
#F0BBFF#E38EFF#E93EFF#CC00FF#A500CC#7A0099#660077
#FFB3FF#FF77FF#FF3EFF#FF00FF#CC00CC#990099#770077
顏色名稱代碼顏色
maroon#800000
darkred#8B0000
brown#A52A2A
firebrick#B22222
crimson#DC143C
red#FF0000
桃紅~紛紅
顏色名稱代碼顏色
mediumvioletred#C71585
palevioletred#D87093
deeppink#FF1493
fuchsia(magenta)#FF00FF
hotpink#FF69B4
pink#FFC0CB
lightpink#FFB6C1
mistyrose#FFE4E1
lavenderblush#FFF0F5
紫
顏色名稱代碼顏色
indigo#4B0082
purple#800080
darkmagenta#8B008B
darkorchid#9932CC
blueviolet#8A2BE2
darkviolet#9400D3
slateblue#6A5ACD
mediumpurple#9370DB
mediumslateblue#7B68EE
mediumorchid#BA55D3
violet#EE82EE
plum#DDA0DD
thistle#D8BFD8
lavender#E6E6FA
褐~橘~米白
顏色名稱代碼顏色
saddlebrown#8B4513
sienna#A0522D
chocolate#D2691E
indianred#CD5C5C
rosybrown#BC8F8F
lightcorol#F08080
salmon#FA8072
lightsalmon#FFA07A
orangered#FF4500
tomato#FF6347
coral#FF7F50
darkorange#FF8C00
sandybrown#F4A460
peru#CD853F
tan#D2B48C
burlywood#DEB887
wheat#F5DEB3
moccasin#FFE4B5
navajowhite#FFDEAD
peachpuff#FFDAB9
bisque#FFE4C4
antuquewhite#FAEBD7
papayawhip#FFEFD5
cornsilk#FFF8DC
oldlace#FDF5E6
linen#FAF0E6
seashell#FFF5EE
snow#FFFAFA
floralwhite#FFFAF0
ivory#FFFFF0
mintcream#F5FFFA
金~黃
顏色名稱代碼顏色
darkgoldenrod#B8860B
goldenrod#DAA520
gold#FFD700
yellow#FFFF00
darkkhaki#BDB76B
khaki#F0E68C
palegoldenrod#EEE8AA
beige#F5F5DC
lemonchiffon#FFFACD
lightgoldenrodyellow#FAFAD2
lightyellow#FFFFE0
~黃
綠
顏色名稱代碼顏色
darkslategray#2F4F4F
darkolivegreen#556B2F
olive#808000
darkgreen#006400
forestgreen#228B22
seagreen#2E8B57
green(teal)#008080
lightseagreen#20B2AA
madiumaquamarine#66CDAA
mediumseagreen#3CB371
darkseagreen#8FBC8F
yellowgreen#9ACD32
limegreen#32CD32
lime#00FF00
chartreuse#7FFF00
lawngreen#7CFC00
greenyellow#ADFF2F
mediumspringgreen#00FA9A
springgreen#00FF7F
lightgreen#90EE90
palegreen#98F898
aquamarine#7FFFD4
honeydew#F0FFF0
藍
顏色名稱代碼顏色
midnightblue#191970
navy#000080
darkblue#00008B
darkslateblue#483D8B
mediumblue#0000CD
royalblue#4169E1
dodgerblue#1E90FF
cornflowerblue#6495ED
deepskyblue#00BFFF
lightskyblue#87CEFA
lightsteelblue#B0C4DE
lightblue#ADD8E6
steelblue#4682B4
darkcyan#008B8B
cadetblue#5F9EA0
darkturquoise#00CED1
mediumturquoise#48D1CC
turquoise#40E0D0
skyblue#87CECB
powderblue#B0E0E6
paleturquoise#AFEEEE
lightcyan#E0FFFF
azure#F0FFFF
aliceblue#F0F8FF
aqua(cyan)#00FFFF
黑~灰~白
顏色名稱代碼顏色
black#000000
dimgray#696969
gray#808080
slategray#708090
lightslategray#778899
dakgray#A9A9A9
silver#C0C0C0
lightgray#D3D3D3
gainsboro#DCDCDC
whitesmoke#F5F5F5
ghostwhite#F8F8FF
white#FFFFFF
⑺ css添加網頁背景色
把background-color: #FFFFFF;添加到body{...}里就行了,一個body{...},添加後就這樣:
body {
font-size: 12px; padding:0; margin:0; font-family:"宋體";background-color: #FFFFFF;
}
⑻ 如何在CSS代碼中把背景顏色改成淺藍色分都給了!
需要准備的材料分別有:電腦、瀏覽器、html編輯器。
1、首先,打開html編輯器,新建html文件,例如:index.html。
⑼ css 背景顏色自動延伸
<div>
<div>Left</div>
<div>Right</div>
</div>
純css的:如果left寬度固定的話(比如:200px),就給外面那個大div弄個寬200px的背景圖,只在y方向一直重復
要是寬度不固定或者你願意用javascript,就用js取得兩個div,判斷高度,讓矮的那個高度等於高的那個:
<div id="left">Left</div>
<div id="right">Right</div>
<script>
function sameH(el1,el2) {
var a = document.getElementById(el1);
var b = document.getElementById(el2);
if (a && b) {
if (a.scrollHeight < b.scrollHeight) {
a.style.height = b.scrollHeight + "px";
}
else {
b.style.height = a.scrollHeight + "px";
}
}
else {
alert("sameH函數需要的對象id不存在或創建在函數運行之後"); }
}
sameH("left","right");//傳入你的兩個div的id
</script>
⑽ css怎麼設置html背景顏色
<!抄doctypehtml>
<html>
<head>
<metacharset="UTF-8">
<title>Document</title>
<styletype="text/css">
body{background:#FFFF00}/*修改BODY里的顏色*/
.div1{background:#0080FF;height:50px;}/*修改div1里的顏色*/
</style>
</head>
<body>
我是body里的文字
<divclass="div1">
我是DIV里的文字
</div>
</body>
</html>