您的位置 首页 css教程

css如何把图片平铺?

css如何把图片平铺?下面本篇文章给大家介绍一下使用css设置背景图片平铺方式。有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助。

background-repeat属性用于定义背景图像如何重复,即背景图像的平铺方式。默认地,背景图像在水平和垂直方向上重复。

可选值有 repeat | repeat-x | repeat-y | space | round | no-repeat,默认值为 repeat。

属性值:

属性值 含义
repeat 默认值,图像在水平方向和垂直方向都重复以填满容器
repeat-x 图像只在水平方向重复以填满容器
repeat-y 图像只在垂直方向重复以填满容器
space 图像向两端对齐重复以填满容器,多余空间用空白代替
round 图像向两端对齐重复以填满容器,多余空间通过图像拉伸来填充
no-repeat 不重复,图像只显示一次

默认情况下,背景图像的填充区域为元素的 padding-box 区域,而背景图像平铺之后,其填充区域将是元素的 border-box 区域。

background-repeat属性需要 2 个参数,如果提供 2 个参数,第一个用于水平方向,第二个用于垂直方向。如果只提供 1 个参数,则同时用于水平方向和垂直方向。特殊值 repeat-x 和 repeat-y除外,因为 repeat-x 相当于 repeat no-repeat,repeat-y 相当于 no-repeat repeat,即 repeat-x 和 repeat-y 就等价于提供了 2 个参数值。

为了清楚了解 background-repeat属性在不同取值下的表现,这里针对每个取值定义了一个类,然后把它们分别应用到一个容器。

HTML代码如下:

<div class="no-repeat"></div><div class="repeat-x"></div><div class="repeat-y"></div><div class="repeat"></div><div class="space"></div><div class="round"></div>

CSS代码如下:

div {width: 100px;height: 120px;border: 1px dashed #888;background-image: url(bg.png);}.repeat-x {background-repeat: repeat-x;}.repeat-y {background-repeat: repeat-y;}.repeat {background-repeat: repeat;}.space {background-repeat: space;}.round {background-repeat: round;}.no-repeat {background-repeat: no-repeat;}

上述代码中,容器的宽度为 100px、高度为 120px,背景图像的宽度和高度都是 40px。为了能够清楚可见背景图像的范围,这里给容器增加了 1px 的虚线框,给背景图像增加了 1px 的黑色边框。运行结果如图:

1.png

从上图可以看出,图像都是按原始尺寸进行重复,来填满容器。在水平方向上,当容器的宽度不是背景图像宽度的整数倍时:如果取值为 space,多余空间用空白填充;如果取值为 round,背景图像会被缩放;如果为其他值,最后一幅图像可能不完整。垂直方向同理。

示例:

<!DOCTYPE html><html>	<head>		<style type="text/css">			div{				margin: 20px;			}			.content1 {				border: 1px solid #000fff;				height: 200px;				background-image: url(../2018.12.15/2.jpg);				background-repeat: repeat;			}			.content2 {				border: 1px solid #000fff;				height: 200px;				background-image: url(../2018.12.15/2.jpg);				background-repeat: repeat-x;			}			.content3 {				border: 1px solid #000fff;				height: 200px;				background-image: url(../2018.12.15/2.jpg);				background-repeat: repeat-y;			}			.content4 {				border: 1px solid #000fff;				height: 200px;				background-image: url(../2018.12.15/2.jpg);				background-repeat: no-repeat;			}		</style>		<div class="content1"></div>		<div class="content2"></div>		<div class="content3"></div>		<div class="content4"></div>		</body></html>

效果图:

x轴和y轴方向平铺

1.jpg

x轴方向平铺

2.jpg

y轴方向平铺

3.jpg

不平铺

4.jpg

更多web前端相关知识,请查阅 HTML中文网 !!

以上就是css如何把图片平铺?的详细内容,更多请关注火云技术网其它相关文章!

文章来源:火云技术网

文章标题:css如何把图片平铺?

文章地址:https://www.pyhw.net/2867_css%e5%a6%82%e4%bd%95%e6%8a%8a%e5%9b%be%e7%89%87%e5%b9%b3%e9%93%ba%ef%bc%9f.html

关于作者: admin

热门文章

发表评论

您的电子邮箱地址不会被公开。

6条评论

网站地图