背景颜色基础知识
background-color属性
background-color属性表示背景颜色,背景颜色可以用十六进制、rgb()、rgba()表示法表示,padding区域也是有背景颜色的。示例代码如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>背景颜色基础知识</title>
<style>
.box1 {
padding: 100px;
width: 200px;
height: 200px;
background-color: gold;
border: 1px solid #000;
}
</style>
</head>
<body>
<div class="box1">
111111
</div>
</body>
</html>
代码效果如下:
可以看到盒子在padding区域也被金黄色给覆盖了。
背景图片基础知识
background-image属性
background-image属性用来设置背景图片,图片路径要写到url()圆括号中,可以是相对路径,也可以是http://开头的绝对路径。示例如下:
<style>
.box1 {
width: 1500px;
height: 1400px;
border: 1px solid #000;
background-image: url(images/flower.jpg);
}
</style>
在盒子中设置了一张花朵的背景图片,效果如下:
当然也可以使用绝对路径来设置背景图片。
如果样式表是外链的,那么要书写从CSS出发到图片的路径,而不是从html出发。示例代码如下:
.box2 {
width: 1000px;
height: 1000px;
border: 1px solid #000;
background-image: url(../images/flower.jpg);
}
当然效果完全一样。