php如何平铺背景图片,css如何让背景图片平铺？css背景图片平铺四种方式介绍

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

我们首先来看一下css设置背景图片平铺方式。repeat：即默认方式，完全平铺背景；

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

repeat-x：横向平铺背景；

repeat-y：纵向平铺背景。

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

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

#content {

border:1px solid #000fff;

height:500px;

background-image:url(http://img12.3lian.com/gaoqing02/01/58/85.jpg);

background-repeat: no-repeat;

}

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

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

#content {

border:1px solid #000fff;

height:500px;

background-image:url(images/tu.jpg);

background-repeat: no-repeat;

}

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

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

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

#content {

border:1px solid #000fff;

height:500px;

background-image:url(images/tu.jpg);

background-repeat: repeat-x;

}

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

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

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

#content {

border:1px solid #000fff;

height:500px;

background-image:url(images/tu.jpg);

background-repeat: repeat-y;

}

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

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

php如何平铺背景图片,css如何让背景图片平铺？css背景图片平铺四种方式介绍相关推荐

css样式引入形式php,引入css样式表的四种方式介绍
一.使用STYLE属性: 将STYLE属性直接加在个别的元件标签里. 这种用法的优点是可灵巧应用样式於各标签中,但是缺点则是没有整篇文件的『统一性』. 二.使用STYLE标签: 将样式规则写在标签之 ...
php图片背景平铺,css如何让背景图片平铺？css背景图片平铺四种方式介绍
在网页设计的过程中,有时候可能会要求背景图片平铺,因为这样会让整个网页看起来比较好看,图片平铺可以不用具体设置body宽度和高度大小,就可以直接将图片平铺整个页面,那么,如何让背景图片平铺呢?接下来本 ...
css 背景平铺控制范围,css如何让背景图片平铺？css背景图片平铺四种方式介绍...
在网页设计的过程中,有时候可能会要求背景图片平铺,因为这样会让整个网页看起来比较好看,图片平铺可以不用具体设置body宽度和高度大小,就可以直接将图片平铺整个页面,那么,如何让背景图片平铺呢?接下来本 ...
css如何让背景图片平铺？css背景图片平铺四种方式介绍-前端教程
在网页设计的过程中,有时候可能会要求背景图片平铺,因为这样会让整个网页看起来比较好看,图片平铺可以不用具体设置body宽度和高度大小,就可以直接将图片平铺整个页面,那么,如何让背景图片平铺呢?接下来本 ...
css如何让背景图片平铺？css背景图片平铺四种方式介绍
在网页设计的过程中,有时候可能会要求背景图片平铺,因为这样会让整个网页看起来比较好看,图片平铺可以不用具体设置body宽度和高度大小,就可以直接将图片平铺整个页面,那么,如何让背景图片平铺呢?接下来本 ...
rp导入图片大小_Axure制作图像的放大与缩小效果的四种方式
1.新建Axure RP项目,取名"Axure制作图像的放大与缩小效果" 2.拖入动态面板控件,取名"放大缩小".设置大小为560*330px.坐标为x:300 ...
HTML 引用Css样式的四种方式
不才,只知道HTML引用CSS样式有四种方式,内部引用和外部引用各两种,因为老是忘记细节,记下了随时翻阅亦可方便如我般的初学者内部引用方式1: 直接在标签内用 style 引用,如: <div ...
css设置子盒子水平垂直居中（四种方式）
css设置子盒子水平垂直居中(四种方式) 1. 使用绝对定位 <!DOCTYPE html> <html><head><meta charset=" ...
如何在html添加css样式表,网页中添加CSS样式表的四种方式
本文向大家描述一下网页中添加CSS样式表的四种方式,首先让我们来看一下CSS样式表文件的优势,主要体现在两个方面,请看下文详细介绍. CSS样式表文件的优势表现在两个方面: ***,简化了网页的格式代 ...

php如何平铺背景图片,css如何让背景图片平铺？css背景图片平铺四种方式介绍

php如何平铺背景图片,css如何让背景图片平铺？css背景图片平铺四种方式介绍相关推荐

最新文章

热门文章