css如何让背景图片平铺？css背景图片平铺四种方式介绍-前端教程

最新推荐文章于 2024-04-19 20:39:07 发布

猿说前端

最新推荐文章于 2024-04-19 20:39:07 发布

阅读量5.4k

点赞数 3

文章标签： css 前端 web前端前端教程前端开发

本文链接：https://blog.csdn.net/ITZ1992/article/details/107039056

版权

在网页设计的过程中，有时候可能会要求背景图片平铺，因为这样会让整个网页看起来比较好看，图片平铺可以不用具体设置body宽度和高度大小，就可以直接将图片平铺整个页面，那么，如何让背景图片平铺呢？接下来本篇文章将给大家来介绍关于css让背景图片平铺的方法，有需要的朋友可以参考一下。

我们首先来看一下css设置背景图片平铺方式。

repeat：即默认方式，完全平铺背景；

no-repeat：在X及Y轴方向均不平铺；

repeat-x：横向平铺背景；

repeat-y：纵向平铺背景。

下面我们就来看一下css的这四种背景图片平铺的实现代码。

css背景图片平铺之完全平铺背景的代码：

> <html>
> 
> <head>
> 
> <style type="text/css">
> 
> #content {
> 
> border:1px solid #000fff;
> 
> height:500px;
> 
> background-image:url(http://img12.3lian.com/gaoqing02/01/58/85.jpg);
> 
> background-repeat: no-repeat;
> 
> }
> 
> </style>
> 
> <div id="content">
> 
> </div>
> 
> </body>
> 
> </html>

css背景图片平铺效果如下：

css背景图片平铺之在X及Y轴方向均不平铺：

> <html>
> 
> <head>
> 
> <style type="text/css">
> 
> #content {
> 
> border:1px solid #000fff;
> 
> height:500px;
> 
> background-image:url(images/tu.jpg);
> 
> background-repeat: no-repeat;
> 
> }
> 
> </style>
> 
> <div id="content">
> 
> </div>
> 
> </body>
> 
> </html>

css背景在X及Y轴方向均不平铺效果如下：

css背景图片平铺之横向平铺背景：

背景图片现在只在X轴即横向进行了平铺操作，纵向并没有进行平铺

> <html>
> 
> <head>
> 
> <style type="text/css">
> 
> #content {
> 
> border:1px solid #000fff;
> 
> height:500px;
> 
> background-image:url(images/tu.jpg);
> 
> background-repeat: repeat-x;
> 
> }
> 
> </style>
> 
> <div id="content">
> 
> </div>
> 
> </body>
> 
> </html>

css横向平铺背景效果如下：

css背景图片平铺之纵向平铺背景：

背景图片现在只在Y轴即横向进行了平铺操作，横向并没有进行平铺

> <html>
> 
> <head>
> 
> <style type="text/css">
> 
> #content {
> 
> border:1px solid #000fff;
> 
> height:500px;
> 
> background-image:url(images/tu.jpg);
> 
> background-repeat: repeat-y;
> 
> }
> 
> </style>
> 
> <div id="content">
> 
> </div>
> 
> </body>
> 
> </html>

css纵向平铺背景效果如下：

以上就是本篇文章的全部内容了，更多精彩内容可以关注我！！！！！！！！

如果你依然在编程的世界里迷茫，不知道自己的未来规划，我们的web前端学习交流扣q-u-n：78478三012 里面可以与大神一起学习并走出迷茫。小白可进群免费领取学习资料，看看前辈们是如何在编程的世界里傲然前行！不停更新最新的教程和学习方法（进群送web前端系统学习路线，详细的前端项目实战教学视频，PDF），有想学习web前端的，或是转行，或是大学生，还有工作中想提升自己能力的，正在学习的小伙伴欢迎加入。前端技术分享圈

猿说前端

关注

3
点赞
踩
5

收藏

觉得还不错? 一键收藏
0
评论
css如何让背景图片平铺？css背景图片平铺四种方式介绍-前端教程

在网页设计的过程中，有时候可能会要求背景图片平铺，因为这样会让整个网页看起来比较好看，图片平铺可以不用具体设置body宽度和高度大小，就可以直接将图片平铺整个页面，那么，如何让背景图片平铺呢？接下来本篇文章将给大家来介绍关于css让背景图片平铺的方法，有需要的朋友可以参考一下。我们首先来看一下css设置背景图片平铺方式。repeat：即默认方式，完全平铺背景；no-repeat：在X及Y轴方向均不平铺；repeat-x：横向平铺背景；repeat-y：纵向平铺背景。下面我们就来看一下css的
复制链接

扫一扫