在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动态规划实现最短路径问题

    问题描述 给定一个加权连通图(无向的或有向的),要求找出从每个定点到其他所有定点之间的最短路径以及最短路径的长度. 2.1 动态规划法原理简介 动态规划算法通常用于求解具有某种最优性质的问题.在这类问 ...

  2. PAT 德才论

    宋代史学家司马光在<资治通鉴>中有一段著名的“德才论”:“是故才德全尽谓之圣人,才德兼亡谓之愚人,德胜才谓之君子,才胜德谓之小人.凡取人之术,苟不得圣人,君子而与之,与其得小人,不若得愚人 ...

  3. idea 启动命令行的时候提示不能创建PTY

    问题描述: 昨天上午,凯哥还在好好的使用idea,中午的时候,360扫描,好像要升级还是要干嘛的,没细看,然后凯哥就点击确定.结果到下午使用idea的Terminal 命令行的时候提示,如下图错误: ...

  4. mysql基础-数据类型和sql模式-学习之(三)

    0x01 mysql的两种方向: 开发DBA:数据库设计(E-R关系图).sql开发.内置函数.存储历程(存储过程和存储函数).触发器.时间调度器(event scheduler) 运维----> ...

  5. jar 反编译工具

    luyten windows版本的 链接:https://pan.baidu.com/s/1hp6gyvJSj_4h60dk5AZejA 密码:c4u7 之所以推荐它,是因为它能避免普通的编译工具jd ...

  6. python2.7 正则表达式的学习

    正则表达式是一种用来匹配字符串的强有力的武器.它的设计思想是用一种描述性的语言来给字符串定义一个规则,凡是符合规则的字符串,我们就认为它“匹配”了,否则,该字符串就是不合法的. 因正则表达式也是用字符 ...

  7. centos7上安装redis以及PHP安装redis扩展（一）

    1.关闭防火墙: systemctl stop firewalld.service #停止firewall systemctl disable firewalld.service #禁止firewal ...

  8. 【分区】使用 GPT 分区表分区并格式化 (非 FreeBSD 系统)

    新购买的 Linux 云服务器,由于数据盘未做分区和格式化,无法使用. 注意: 数据盘中的数据在格式化后将全部被清空.请在格式化之前,确保数据盘中没有数据或已对重要数据进行备份.为避免服务发生异常,格 ...

  9. @atcoder - AGC018F@ Two Trees

    目录 @description@ @solution@ @accepted code@ @details@ @description@ 给定两棵树 A, B.现你需要构造一组值 (X1, X2, .. ...

  10. JSON案例

    原文链接:https://zhuanlan.zhihu.com/p/62763428 json字符串->JSONObject 用JSON.parseObject()方法即可将JSon字符串转化为 ...