大约 2 分钟
示例1
<!DOCTYPE html>
<html>
<head>
<title>css当中的背景属性：background</title>
<meta charset="utf-8" />
<link href="" type="text/css" rel="stylesheet" />
<style>
*{
padding:0px;
margin:0px;
}
body{
/*设置body的背景颜色*/
background-color:rgb(123,234,125);
/*修饰背景图片*/
background-image:url('./images/4.jpg');
/*设置背景图片是否重复平铺*/
background-repeat:no-repeat;
/*设置背景图片的尺寸(单位：百分比)*/
background-size:100%;
/*设置背景图片为固定定位(不跟随滚轮滚动)*/
background-attachment:fixed;
}
#bbox{
width:100%;
height:2000px;
background-color:rgba(255,255,255,0.5);
}
</style>
</head>
<body bgcolor="green" style="height:2000px;">
<div id="bbox">
<h1 style="color:white;">css当中的背景属性：background</h1>
</div>
</body>
</html>示例2
<!DOCTYPE html>
<html>
<head>
<title>css当中的背景属性：background</title>
<meta charset="utf-8" />
<link href="" type="text/css" rel="stylesheet" />
<style>
div{
width:500px;
height:500px;
border:1px solid #ddd;
/*修饰背景颜色*/
background-color:white;
float:left;
}
#one{
background-image:url('./images/gege.jpg');
background-size:200px;
background-repeat:no-repeat;
/*给背景图片定位(left、right、top、bottom、center)*/
background-position:center;
}
#two{
background-image:url('./images/gege.jpg');
background-size:200px;
background-repeat:no-repeat;
/*给背景图片定位(单位：像素)*/
background-position:100px 200px;
}
</style>
</head>
<body>
<h1>css当中的背景属性：background</h1>
<div id="one"></div>
<div id="two"></div>
</body>
</html>示例3
<!DOCTYPE html>
<html>
<head>
<title>css背景属性：实现导航条背景</title>
<meta charset="utf-8" />
<link href="" type="text/css" rel="stylesheet" />
<style>
#nav{
width:100%;
height:50px;
/*引入一张导航1px切图，使用平铺即可实现*/
/*background-image:url('./bg/repeat.png');
background-position:0px 0px;
background-repeat:repeat-x;*/
/*放大招 background(颜色 图片 平铺方式 是否固定 定位)*/
background:url('./bg/repeat.png') repeat-x 0px -160px;
}
</style>
</head>
<body>
<h1>css背景属性：实现导航条背景</h1>
<div id="nav"></div>
</body>
</html>示例4
<!DOCTYPE html>
<html>
<head>
<title>css背景属性：通过定位准确的获取背景图像中的某一个小图标</title>
<meta charset="utf-8" />
<link href="" type="text/css" rel="stylesheet" />
<style>
#logo{
width:40px;
height:40px;
border:1px solid red;
background:url('./bg/2009072553153737.jpg') no-repeat -440px -280px;
}
</style>
</head>
<body>
<h1>css背景属性：通过定位准确的获取背景图像中的某一个小图标</h1>
<div id="logo"></div>
</body>
</html><!DOCTYPE html>
<html>
<head>
<title>使用背景定位方式实现按钮样式</title>
<meta charset="utf-8" />
<link href="" type="text/css" rel="stylesheet" />
<style>
div{width:60px;height:60px;border:1px solid red;float:left;margin:10px;border-radius:30px;background:url('./bg/tag.jpg') no-repeat;}
#one{background-position:0px -70px;}
#two{background-position:-115px -75px;}
#three{background-position:5px -470px;}
#four{background-position:-115px -300px;}
#one:hover{background-position:-374px -12px;}
#two:hover{background-position:-422px -136px;}
#three:hover{background-position:-365px -365px;}
#four:hover{background-position:-470px -421px;}
.cursor:hover{cursor:pointer;box-shadow:5px 5px 12px #ddd;}
</style>
</head>
<body>
<h1>使用背景定位方式实现按钮样式</h1>
<div id="one" class="cursor"></div>
<div id="two" class="cursor"></div>
<div id="three" class="cursor"></div>
<div id="four" class="cursor"></div>
</body>
</html>