小试牛刀
2018-07-11 本文已影响0人
WANGLIN_HZ
<!DOCTYPE html>
<html>
<head>
<title>背景</title>
<style type="text/css">
.box1{
width: 1000px;
height: 1000px;
background-color: green;
margin: 0 auto;
background-image: url(img/by.jpg);
background-repeat: repeat-y;
}
</style>
</head>
<body>
<div class="box1"></div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<title>背景</title>
<style type="text/css">
.box1{
width: 1000px;
height: 1000px;
background-color: green;
margin: 0 auto;
background-image: url(img/by.jpg);
background-repeat: repeat-y;
}
</style>
</head>
<body>
<div class="box1"></div>
</body>
</html>
- background-repeat用于控制背景图片的 重复方式。
- 如果只设置背景图片默认背景图片将会使 用平铺的方式，可以通过该属性进行修改。
- 可选值：
repeat：默认值，图片左右上下平铺
no-repeat：只显示图片一次，不会平铺
repeat-x：沿x轴水平平铺一张图片
repeat-y：沿y轴水平平铺一张图片
<!DOCTYPE html>
<html>
<head>
<title>背景偏移与定位</title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
body{
background-image: url();
background-repeat: no-repeat;
height: 5000px;
background-attachment: fixed;
}
.box1{
width: 500px;
height: 500px;
margin: 0 auto;
background-color: rgb(220,230,220);
background-repeat:no-repeat;
background-image: url(img/1by.jpg);
background-position: -50px -50px;
background-repeat: no-repeat;
background-attachment: fixed;
}
</style>
</head>
<body>
<div class="box1"></div>
</body>
</html>
- background-attachment用来设置背景图 片是否随页面滚动。
- 可选值：
scroll：随页面滚动
fixed：不随页面滚动
<!DOCTYPE html>
<html>
<head>
<title>按钮练习</title>
<style type="text/css">
.an:link{
display: block;
width: 500px;
height: 400px;
background-image: url();
background-repeat: no-repeat;
}
.an:hover{
/*background-image: url();*/
background-position: -93 0px;
}
.an:active{
/*background-image: url();*/
background-position: -186 0px;
}
</style>
</head>
<body>
<a href="#" class="an">超链接</a>
</body>
</html>
