在CSS中可以为元素设置背景色以实现想要的元素样式,背景色的CSS属性为background-color。
background-color属性为元素设置一种纯色。这种颜色会填充兀素的内容、内边距和边框区域,扩展到元素边框的外边界,但不包括外边距。如果边框有透明部分(如虚线边框),就会透过这些透明部分显示出背景色。
尽管在大多数情况下,没有必要使用transparent。不过,如果不希望某元素拥有背景色,同时又不希望用户对浏览器的颜色设置影响到您的设计,那么设置ransparent值还是有必要的。
background-color属性的值可以是以下几种:
•color_name:规定颜色值为颜色名称的背景颜色,如red。
•hex_number:规定颜色值为十六进制值的背景颜色,如#ffOOOO。
•rgb_number:规定颜色值为RGB代码的背景颜色,如RGB(255}0,0)。
•transparent:默认,背景颜色为透明。
•inherit:规定应该从父元素继承background-color属性的设置。
【例题】使用background-color属性
代码如下:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
div{
width: 200px;
height: 200px;
text-align: center;
line-height: 200px;
font-size: 50px;
color:#fff;
}
.d1{
background-color:red;
}
.d2{
background-color: #00ff00;
}
.d3{
background-color: rgb(0,0,255);
}
</style>
</head>
<body>
<div>红色</div>
<div>绿色</div>
<div>蓝色</div>
</body>
</html>
已有 22658 名学员学习以下课程通过考试
最需教育客户端 软件问题一手掌握
去 App Store 免费下载 iOS 客户端
点击加载更多评论>>