html设置背景图片平铺方法,实际上平铺有多种方法,但是因为图片的大小不同,我们需要不同形式的平铺
一、方法/步骤
1.新建一个html文件
2.把你的图片放在一个文件夹内
PS:我的图片放在了images的文件夹里面
3.设置样式
<head><style type="text/css">body {background-image: url('images/luoxiong.jpg');}</style></head><body></body>
PS:因为背景设置在主体,所以要定义为body{}。
background-image:url(图片),这个是添加图片的意思。
4.不平铺且放大
<head><style type="text/css">body {background-image: url('images/luoxiong.jpg');background-repeat: no-repeat;background-size: 100%;}</style></head><body></body>
PS:background-repeat:no-repeat是不平铺的意思。
background-size: 100%是放大到整个页面的意思。
效果如下:
5.横向平铺
<head><style type="text/css">body {background-image: url('images/luoxiong.jpg');background-repeat:repeat-x;}</style></head><body></body>
PS:background-repeat:repeat-x就会横向平铺
效果如下:
5.纵向平铺
<head><style type="text/css">body {background-image: url('images/luoxiong.jpg');background-repeat:repeat-y;}</style></head><body></body>
PS:background-repeat:repeat-y;这个指令是纵向平铺。
效果如下:
5.全屏平铺
<head><style type="text/css">body {background-image: url('images/luoxiong.jpg');background-repeat:repeat;}</style></head><body></body>
PS:background-repeat:repeat;是全屏平铺。
可以用background-size放大缩小。
效果如下:
提示:如有不对请多多指教!希望给您带来帮助!多谢。。