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

效果如下：

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

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

Pycharm使用小技巧 - 如何设置背景图片
万叶集
MATLAB小技巧（9）图片合成视频与视频分帧
MATLAB小技巧(9)图片合成视频与视频分帧前言一. MATLAB仿真-序列合成二. MATLAB仿真-视频分帧三. 小结前言 MATLAB进行图像处理相关的学习是非常友好的,可以从零开始 ...
微信小程序设置wxss背景图片
微信小程序设置wxss背景图片目前只支持两种: 在线图片如果有自己的服务器可以将图片放到自己的web服务器上: 或者参考这个通过qq相册或百度相册将本地图片变为网上图片通过qq相册或百度相册将本地图 ...
学会这3个小技巧，轻松去图片水印
有些小伙伴在浏览个别平台时,会看到一些心水的图片,就想保存下来,拿来当头像壁纸,或是发朋友圈时用来配图.但是有些图片下载后会发现自带着平台水印,虽然理解它们是为了保护自身权益,但我们并不是进行商用,使 ...
小tip: base64:URL背景图片与web页面性能优化（转载）
今天在代码看到css北京图片使用了base64格式表示图片,SO,百度了一下.感觉完全可以解释了. 一.base64百科 Base64是网络上最常见的用于传输8Bit字节代码的编码方式之一,可用于在H ...
微信小程序如何设置背景图片
问题描述在微信小程序当我们使用本地图片作为背景图片的时候我们会参与以下问题. 代码: .bg{width: 750rpx;height: 540rpx;background-image: url(. ...
微信小程序如何设置背景图片（可行版！！）
1. 添加背景图(两步曲) (1).先在wxml里写一个块,块里包含一张图片即可,其实不加块也行,单独的一张图片就行了,自我代码习惯罢了(如下)  <view& ...
Win10的两个实用技巧系列之华硕电脑设置面部识别的技巧、删除背景图片的方法
Win10系统的华硕电脑怎么使用人脸解锁? 华硕电脑设置面部识别的技巧 Win10系统的华硕电脑怎么使用人脸解锁?华硕电脑想要添加面部识别,方便人脸解锁,下面我们就来看看华硕电脑设置面部识别的技巧有 ...
小程序view的背景图片
小程序的背景图片通过给view添加class,运用backgroundimage:url('图片转化base64的代码'), 将图片转化为base64可以去站长工具,如果大小不合适,可以通过 back ...

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

html设置背景图片平铺方法，实际上平铺有多种方法，但是因为图片的大小不同，我们需要不同形式的平铺

一、方法/步骤

1.新建一个html文件

2.把你的图片放在一个文件夹内

3.设置样式

4.不平铺且放大

5.横向平铺

5.纵向平铺

5.全屏平铺

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

最新文章

热门文章