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

在网页设计的过程中，有时候可能会要求背景图片平铺，因为这样会让整个网页看起来比较好看，图片平铺可以不用具体设置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前端的，或是转行，或是大学生，还有工作中想提升自己能力的，正在学习的小伙伴欢迎加入。前端技术分享圈

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

css样式引入形式php,引入css样式表的四种方式介绍
一.使用STYLE属性: 将STYLE属性直接加在个别的元件标签里. 这种用法的优点是可灵巧应用样式於各标签中,但是缺点则是没有整篇文件的『统一性』. 二.使用STYLE标签: 将样式规则写在标签之 ...
php图片背景平铺,css如何让背景图片平铺？css背景图片平铺四种方式介绍
在网页设计的过程中,有时候可能会要求背景图片平铺,因为这样会让整个网页看起来比较好看,图片平铺可以不用具体设置body宽度和高度大小,就可以直接将图片平铺整个页面,那么,如何让背景图片平铺呢?接下来本 ...
php如何平铺背景图片,css如何让背景图片平铺？css背景图片平铺四种方式介绍
在网页设计的过程中,有时候可能会要求背景图片平铺,因为这样会让整个网页看起来比较好看,图片平铺可以不用具体设置body宽度和高度大小,就可以直接将图片平铺整个页面,那么,如何让背景图片平铺呢?接下来本 ...
css 背景平铺控制范围,css如何让背景图片平铺？css背景图片平铺四种方式介绍...
在网页设计的过程中,有时候可能会要求背景图片平铺,因为这样会让整个网页看起来比较好看,图片平铺可以不用具体设置body宽度和高度大小,就可以直接将图片平铺整个页面,那么,如何让背景图片平铺呢?接下来本 ...
css如何让背景图片平铺？css背景图片平铺四种方式介绍
在网页设计的过程中,有时候可能会要求背景图片平铺,因为这样会让整个网页看起来比较好看,图片平铺可以不用具体设置body宽度和高度大小,就可以直接将图片平铺整个页面,那么,如何让背景图片平铺呢?接下来本 ...
HTML 引用Css样式的四种方式
不才,只知道HTML引用CSS样式有四种方式,内部引用和外部引用各两种,因为老是忘记细节,记下了随时翻阅亦可方便如我般的初学者内部引用方式1: 直接在标签内用 style 引用,如: <div ...
css设置子盒子水平垂直居中（四种方式）
css设置子盒子水平垂直居中(四种方式) 1. 使用绝对定位 <!DOCTYPE html> <html><head><meta charset=" ...
如何在html添加css样式表,网页中添加CSS样式表的四种方式
本文向大家描述一下网页中添加CSS样式表的四种方式,首先让我们来看一下CSS样式表文件的优势,主要体现在两个方面,请看下文详细介绍. CSS样式表文件的优势表现在两个方面: ***,简化了网页的格式代 ...
引入css的方式的四种方式,引入css的四种方式
1.内联式引用:直接用在标签上,但维护成本高 style='font-size:16px;color:#000000' 2.外部连接式引用:css代码与html代码分离,便于代码重复使用 style. ...