本文详细介绍了如何使用CSS设置背景图片，包括图片的平铺、大小调整、位置设定及固定等属性，帮助读者掌握背景图片的高级应用技巧。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>背景1</title>
<style>
/*背景图片平铺repeat-y repeat-x*/
/*不平铺（不重复）的话，就是no-repeat*/
body{
background-repeat: repeat-y repeat-x;
background-image:url(../imges/timg.gif)
}
</style>
</head>
<body>
<div>
</div>
</body>
</html>
现在，我们将图片设置为背景，看看会有什么效果：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>背景2</title>
<style>
/*背景图片平铺repeat-y repeat-x*/
/*不平铺（不重复）的话，就是no-repeat*/
/*body{
background-repeat: repeat-y repeat-x;
background-image:url(../imges/timg.gif)
}*/
div{
/*url写图片路径的*/
/*设置图片的相关属性*/
background-image: url(../imges/timg.gif);
/*这里即显示的的图片为正方形*/
background-size: 200px;
/*这里如果不设置no-repeat，
那么，可能就会出现平铺背景图片部分残缺的现象。*/
background-repeat: no-repeat;
/*居顶*/
background-position: top;
/*这里如果不设置居中，
那么会默认居中。*/
/*居底中*/
background-position: center bottom;
/*居左顶*/
background-position: left top;
/*居右底*/
background-position: right bottom;
/*设置背景色及其宽、高*/
background-color: blue;
width: 300px;
height:400px;
}
</style>
</head>
<body>
<div>
<!--
我们在这里可以设置图片的宽高，
但是我们并不能随心所欲的去设置图片的位置、
大小等属性。
-->
<!--
<img src="../imges/timg (6).gif"/ width="300">
-->
<!--因为，现在图片成为了背景，
所以，我们在这个块里面所写的内容，
可以叠加到背景上。
-->
asdfghjkl
/*
如图所示：
</div>
</body>
</html>
<!DOCTYPE html
<html>
<head>
<meta charset="UTF-8">
<title>背景3</title>
<style>
body{
background-image: url(../imges/timg.gif);
background-attachment: fixed;
/*background-attachment的作用是将文字与图像分离，
* 图像在动，文字不动。*/
/**
* 背景简写：
* 将属性写到一行
*/
/*background:transparent url(../imges/timg.gif) no-repeat fixed;*/
/**
* 背景透明度：
* 最后一位是透明度，前三个代表红绿蓝三色。
/*第四个数据，只能是0~1之间的值，
0是完全透明，1是完全不透明，为黑色。*/
/*background-color: rgba(0,0,0,1);*/
}
div{
height: 200px;
color: #fff;
}
</style>
</head>
<!--附着-->
<body>
<div>asdfghjk</div>
<div>asdfghjk</div>
<div>asdfghjk</div>
<div>asdfghjk</div>
<div>asdfghjk</div>
<div>asdfghjk</div>
<div>asdfghjk</div>
<div>asdfghjk</div>
<div>asdfghjk</div>
<div>asdfghjk</div>
<div>asdfghjk</div>
<div>asdfghjk</div>
<div>asdfghjk</div>
<div>asdfghjk</div>
<div>asdfghjk</div>
<div>asdfghjk</div>
<div>asdfghjk</div>
<div>asdfghjk</div>
<div>asdfghjk</div>
<div>asdfghjk</div>
<div>asdfghjk</div>
<div>asdfghjk</div>
<div>asdfghjk</div>
<div>asdfghjk</div>
<div>asdfghjk</div>
<div>asdfghjk</div>
<div>asdfghjk</div>
</body>
</html>
扫一扫
426
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
