网站地图    收藏   

主页 > 专题教程 > css >

background-color

来源:自学PHP网    时间:2018-02-08 10:48 作者: 阅读:

[导读] background-color属性用于设置元素的背景颜色。它通过 值来设置元素的背景色。...

background-color属性用于设置元素的背景颜色。它通过值来设置元素的背景色。

一个元素可以有一个或多个背景图像,background-color属性可以在所有背景图像下面绘制背色。如果设置了背景图像,但是图像是无效的图片,那么就会在元素上显示指定的背景色。

元素背景色的剪裁方式和最底层的背景图像的裁剪方式相同。关于背景剪裁属性的详细信息,你可以参考属性。

当你在背景图像上设置了一些文字的时候,你要确保这些文字的颜色和背景颜色不同。否则在背景图像失效的时候,这些文字就会变得不可见了。

官方语法
background-color: <color>                              
                            

参数:

background-color属性的参数是CSS的一种数据类型,用于指定一种背景颜色。即使你设置了一个或多个背景图像,指定的背景颜色仍然会被渲染。当背景图像不是透明的时候,背景颜色会被透明处理。在CSS中透明(transparent)是一种颜色。

background-color属性的初始值是transparent

例如下面的代码为元素设置元素的背景颜色为黑色和文字颜色为白色:

div { 
    background-color: #000;
    color: white;
}                               
                            

也可以通过rgb()hsl()rgba()hsla()函数来设置背景色。

.element-1 { 
    background-color: rgb(252, 35, 68);
}
.element-2 { 
    background-color: rgb(252, 35, 68, .5);
}
.element-3 { 
    background-color: hsl(250, 30%, 50%);
}  
.element-4 { 
    background-color: hsl(250, 30%, 50%, .8);
}                              
                            
适用范围

background-color属性可以使用在所有元素上。

在线演示

下面的DEMO分别为元素设置不同的背景颜色和文字颜色:

background-color: teal;
color: white;
使用关键字
background-color: rgb(210,82,127);
color: rgb(255,255,204);
使用rgb()函数
background-color: #777799;
color: #FFFFFF;
使用十六进制颜色值

下面的例子中使用一张透明的png图片作为背景图片,并设置了一个背景颜色。由于图片的尺寸不足以覆盖整个元素,所以背景颜色是可见的。

浏览器支持

所有的现代浏览器都支持颜色属性。包括:Chrome, Firefox, Safari, Opera, IE 和 Android 和 iOS。

最新评论

添加评论

更多文章推荐

自学PHP网专注网站建设学习,PHP程序学习,平面设计学习,以及操作系统学习

京ICP备14009008号-1@版权所有www.zixuephp.com

网站声明:本站所有视频,教程都由网友上传,站长收集和分享给大家学习使用,如由牵扯版权问题请联系站长邮箱904561283@qq.com

添加评论