在CSS中，可以使用background（背景）属性来添加图片，默认图片是向x轴和y轴重复。那么css如何将图片横向平铺？下面本篇文章就来给大家介绍一下使用CSS将图片横向平铺的方法，希望对大家有所帮助。

在CSS中，可以使用background-repeat属性来将图片横向平铺。background-repeat属性是用来设置背景图像如何平铺的；默认地，背景图像在水平和垂直方向上重复。

语法：

background-repeat:repeat|repeat-x|repeat-y|no-repeat;

属性值：

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

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

  • repeat-x：横向平铺背景；

  • repeat-y：纵向平铺背景。

提示：背景图像的位置是根据 background-position 属性设置的。如果未规定 background-position 属性，图像会被放置在元素的左上角。

示例：将图片横向平铺

<!DOCTYPE html>

<html>

	<head>

		<meta charset="UTF-8">

		<style type="text/css">

			#content {

				border: 1px solid #000fff;

				height: 250px;

				background-image: url(2.jpg);

				background-repeat: repeat-x;

			}

		</style>

		<div id="content"></div>

		</body>

</html>

css如何将图片横向平铺？的更多相关文章

  1. 如何通过CSS实现背景图片自动平铺或拉伸至整个屏幕（自适应大小）

    默认情况下,通过HTML代码的BODY标签设置好背景图片<body background="x.jpg"> 后,图片会自动横向和纵向平铺.这就会产生一些美观上的问题. ...

  2. CSS背景横向平铺BUG，解决方法

    给定DIV一个背景图片横向平铺,缩小浏览器,拉动横向滚动条,此时触发此BUG:背景图片平铺不完整 解决办法: 1.把背景图片写在BODY上,此办法局限于没有使用iframe的情况下,所以少用 2.设定 ...

  3. Android 背景图片重复平铺

    有时候我们需要将一个图片横向或者纵向的平铺(重复循环),这个时候我们需要创建一个xml文件,如下: <?xml version ="1.0" encoding =" ...

  4. ios 缩放图片（平铺）

    //缩放图片(平铺) - (UIImage *)resizeImage:(NSString *)imgName { UIImage *bgImage =  [UIImage imageNamed:im ...

  5. [UWP]使用Win2D的BorderEffect实现图片的平铺功能

    1. WPF有,而UWP没有的图片平铺功能 在WPF中只要将ImageSource的TileMode属性设置为Tile即可实现图片的平铺,具体可见WPF的这些文档: ImageBrush 类 (Sys ...

  6. CSS背景颜色、背景图片、平铺、定位、固定

    CSS背景颜色设置 background-color:red;如设置背景颜色为红色: 背景颜色设置支持3种写法: 颜色名 16进制 rgb CSS背景图片颜色设置 background-image:u ...

  7. 使用一个小图片tile平铺到ImageView中或Activity背景

    方法两种: 首先必须在res/drawable目录下包含一个background.jpg 方法1:在res/drawable中创建一个xml文件(background_repeat.xml) 内容为 ...

  8. CSS背景background图片

    一.CSS背景background图片   -   TOP 1.背景图片语法background-image:url() 引入背景图片background-repeat:no-repeat 设置背景图 ...

  9. Canvas 图片平铺设置

    /** * 图片平铺 */ function initDemo7(){ var canvas = document.getElementById("demo7"); if (!ca ...

随机推荐

  1. java实现第五届蓝桥杯海盗分金币

    海盗分金币 有5个海盗,相约进行一次帆船比赛. 比赛中天气发生突变,他们被冲散了. 恰巧,他们都先后经过途中的一个无名的荒岛,并且每个人都信心满满,觉得自己是第一个经过该岛的人. 第一个人在沙滩上发现 ...

  2. [RH134] 12-系统启动

    1.系统启动流程 开机--->BIOS自检(需要检测的设备是否正常)--->磁盘的MBR分区--->BootLoader(引导加载器)加载内核--->识别各分区的文件系统 2. ...

  3. iOS－Code Data多线程的封装详解

    Code Data 的单例封装:      很容易发现,系统生成的模版代码将Core Data 的基本的准备(貌似还挺复杂!)都放在 AppDelegate中了,可苹果公司为什么会这么做呢?     ...

  4. LOJ 3045: 洛谷 P5326: 「ZJOI2019」开关

    题目传送门:LOJ #3045. 题意简述 略. 题解 从高斯消元出发好像需要一些集合幂级数的知识,就不从这个角度思考了. 令 \(\displaystyle \dot p = \sum_{i = 1 ...

  5. python模拟网站登陆-滑动验证码

    普通滑动验证 以http://admin.emaotai.cn/login.aspx为例这类验证码只需要我们将滑块拖动指定位置,处理起来比较简单.拖动之前需要先将滚动条滚动到指定元素位置. impor ...

  6. VMWare虚拟机开启时显示模块“Disk”启动失败的解决方案

    找到虚拟机所在的目录, 将 .vmx文件打开 将文件vmci0.present = "TRUE"改为 vmci0.present = "FALSE" 删除以.l ...

  7. ZWave 数据包格式

    ZWave Device 的过程中,其实就是对不同的 COMMAND CLASS 进行解析处理.在刚开始进入ZWAVE 开发时,为了弄清楚数据包的格式,做了下面的参考表格.不过后来发现用来抓包的 sn ...

  8. 05.DRF-Django REST framework 简介

    一.明确REST接口开发的核心任务 分析一下上节的案例,可以发现,在开发REST API接口时,视图中做的最主要有三件事: 将请求的数据(如JSON格式)转换为模型类对象 操作数据库 将模型类对象转换 ...

  9. 谷歌Chrome成最受欢迎的浏览器 它为啥好用?

    毫无疑问,在搜索引擎领域,谷歌是绝对的主导者.但是,一般人却很容易低估我们受到的“控制”.比如,它的浏览器Chrome. 在不到九年的时间,谷歌Chrome浏览器已经成为全球使用最多的网页浏览器.目前 ...

  10. unittest模块在linux报错: AttributeError: module 'unittest' has no attribute 'TestRunner'

    一开始在windows下运行没有问题,但是在linux下运行却报如下错误: ​ AttributeError: module 'unittest' has no attribute 'TestRunn ...