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

最新推荐文章于 2024-07-07 02:13:58 发布

拾柒qi

最新推荐文章于 2024-07-07 02:13:58 发布

阅读量2.3w

点赞数 54

文章标签： mongodb html javascript css vue.js

本文链接：https://blog.csdn.net/weixin_53000915/article/details/113038593

版权

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

效果如下：
在这里插入图片描述
提示：如有不对请多多指教！希望给您带来帮助！多谢。。

拾柒qi

关注

54
点赞
踩
203

收藏

觉得还不错? 一键收藏
7
评论
一天1个小技巧——html的背景图片如何平铺整个页面？

html设置背景图片平铺方法，实际上平铺有多种方法，但是因为图片的大小不同，我们需要不同形式的平铺一、方法/步骤1.新建一个html文件2.把你的图片放在一个文件夹内1.新建一个html文件示例：pandas 是基于NumPy 的一种工具，该工具是为了解决数据分析任务而创建的。二、使用步骤1.引入库代码如下（示例）：import numpy as npimport pandas as pdimport matplotlib.pyplot as pltimport seaborn
复制链接

扫一扫