CSS设置图片的重复
CSS通过设置background-repeat属性来设置图片的重复方式,包括水平重复、竖直重复和不重复等。
图片的竖直方向重复。
<span style="font-size:24px;"><html>
<head>
<title>
背景重复
</title>
<style>
<!--
body{
padding:0px;
margin:0px;
background-image:url(
http://scs.ganjistatic1.com/gjfs12/M09/A3/B3/CgEHC1VGJz2HZm6eAAEe8iEJ1Go460_600-0_6-0.jpg);
background-repeat:repeat-y;
background-color:#0066FF;
}
-->
</style>
</head>
<body>
</body>
</html></span>
如果将background-repeat属性的值设置为repeat-x,则背景图片将在水平方向上重复显示。
最后,就是将background-repeat的属性设置为no-repeat,即不重复作为单一的图片显示。
<span style="font-size:24px;"><html>
<head>
<title>
背景重复
</title>
<style>
<!--
body{
padding:0px;
margin:0px;
background-image:url(
http://scs.ganjistatic1.com/gjfs12/M09/A3/B3/CgEHC1VGJz2HZm6eAAEe8iEJ1Go460_600-0_6-0.jpg);
background-repeat:no-repeat;
}
-->
</style>
</head>
<body>
<div style="padding-left:10px;padding-to:100px;">小猫</div>
</body>
</html></span>
显示的效果,图片仅仅显示了一次,并通过div标记的CSS属性,调整了文字的位置,使其位于图片的上面。