背景平铺
语法：
背景不平铺，默认是平铺的 background-repeat: no-repeat; 沿x轴平铺 background-repeat: repea-x;
<!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>css背景平铺</title>
<style>
div {
width: 300px;
height: 300px;
background-image: url(images/pic.jpeg);
background-repeat: repeat-x;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
结果演示
背景图片位置
<!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>css背景图片位置</title>
<style>
h3 {
width: 118px;
height: 40px;
/* 文字垂直居中对齐*/
line-height: 40px;
/*背景图片水平靠左对齐 垂直居中对齐*/
background-position: left center;
background-image: url(images/icon.png);
background-repeat: no-repeat;
text-indent: 1em;
}
</style>
</head>
<body>
<h3>测试</h3>
</body>
</html>
结果演示
超大背景图片一般放在body中
方位属性值
- center：背景图像横向和纵向居中。
- left：背景图像在横向上填充从左边开始。
- right：背景图像在横向上填充从右边开始。
- top：背景图像在纵向上填充从顶部开始。
- bottom：背景图像在纵向上填充从底部开始。
精确单位
语法：
background-position:x像素 y像素;
- 如果只指定一个数值，那该数值一定是x坐标，另一个默认为垂直居中。
- 如果指定的两个值是精确单位和方位名词混合使用，那第一个也是x坐标的意思，第二个也是y坐标的意思。
背景附着
语法：
background-attachment:scroll
- scroll 背景图像是随对象内容滚动
- fixed 背景图像固定
背景属性复合写法
以上所写代码可以用下面的代码复合起来。
background: black url(images/bg.jpg) no-repeat fixed center top;
背景色半透明
语法：
background:rgba{0,0,0,0.3};
- 最后一个参数是设置透明度，取值范围在0-1之间。
<!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>
div {
width: 300px;
height: 200px;
background: rgba(163, 55, 55, 0.5);
}
</style>
</head>
<body>
<div>测试</div>
</body>
</html>
结果演示
案例
<!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>
.cla a {
display: inline-block;
width: 120px;
height: 48px;
color: aliceblue;
text-decoration: none;
line-height: 48px;
text-align: center;
}
.cla .bg1 {
background: url(images/bg1.png) no-repeat;
}
.cla .bg1:hover {
background: url(images/bg2.png)
}
.cla .bg3 {
background: url(images/bg4.png) no-repeat;
}
.cla .bg3:hover {
background: url(images/bg5.png)
}
.cla .bg4 {
background: url(images/bg11.png) no-repeat;
}
.cla .bg4:hover {
background: url(images/bg22.png)
}
.cla .bg5 {
background: url(images/bg22.png) no-repeat;
}
.cla .bg5:hover {
background: url(images/bg4.png)
}
</style>
</head>
<body>
<div class="cla">
<a href="#" class="bg1">五彩导航</a>
<a href="#" class="bg3">五彩导航</a>
<a href="#" class="bg4">五彩导航</a>
<a href="#" class="bg5">五彩导航</a>
</div>
</body>
</html>
结果演示
