1200字范文,内容丰富有趣,写作的好帮手!
1200字范文 > 一天1个小技巧——html的背景图片如何平铺整个页面?

一天1个小技巧——html的背景图片如何平铺整个页面?

时间:2024-08-10 01:18:48

相关推荐

一天1个小技巧——html的背景图片如何平铺整个页面?

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放大缩小。

效果如下:

提示:如有不对请多多指教!希望给您带来帮助!多谢。

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。