当前位置:首页 » 风景景观 » 背景色css

背景色css

发布时间: 2020-11-23 02:53:43

⑴ 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>

热点内容
一部国外电影,一个老男人骑个摩托车 发布:2024-08-19 09:13:10 浏览:920
脖子上有睾丸是什么电影 发布:2024-08-19 09:03:17 浏览:374
变形金刚撒谁家的 发布:2024-08-19 08:43:06 浏览:478
美国男电影双胞胎 发布:2024-08-19 08:42:20 浏览:764
黑人橄榄球少年收养电影 发布:2024-08-19 08:25:26 浏览:918
夏目哉大片 发布:2024-08-19 08:09:22 浏览:806
他第一部出演的电视剧是,的英语 发布:2024-08-19 08:07:54 浏览:654
电影检索 发布:2024-08-19 07:48:52 浏览:198
谁有视频 发布:2024-08-19 07:41:55 浏览:141
成龙香港鬼片电影大全 发布:2024-08-19 07:39:46 浏览:223