html去图片平铺效果,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代码如下:
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 的黑色边框。运行结果如图:
从上图可以看出,图像都是按原始尺寸进行重复,来填满容器。在水平方向上,当容器的宽度不是背景图像宽度的整数倍时:如果取值为 space,多余空间用空白填充;如果取值为 round,背景图像会被缩放;如果为其他值,最后一幅图像可能不完整。垂直方向同理。
示例:
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;
}
效果图:
x轴和y轴方向平铺
x轴方向平铺
y轴方向平铺
不平铺
更多web前端相关知识,请查阅 HTML中文网 !!
html去图片平铺效果,css如何把图片平铺?相关推荐
- html怎么把图片做成抖动效果,css简单实现图片logo抖动摇晃效果
/*图片img摇啊摇 2017-09-06 15:20:16挖鱼源码网vier*/ .wuisoxo { display: inline-block; -webkit-transform-origin ...
- html5图片平铺的代码,jQuery图片平铺效果制作网页背景图片平铺代码
插件描述:jQuery图片平铺效果制作网页背景图片平铺代码 调用JS文件 调用插件方法 $(function(){ // 插件初始化 $('img').jqthumb({ classname : 'j ...
- html网页背景图片平铺代码,jQuery图片平铺效果制作网页背景图片平铺代码
插件描述:jQuery图片平铺效果制作网页背景图片平铺代码 调用JS文件 调用插件方法 $(function(){ // 插件初始化 $('img').jqthumb({ classname : 'j ...
- html图片重叠怎么实现,css如何实现图片堆叠效果
1.初始index.html 为了建立第一张照片,也就是最上面的那张.我们只需要添加一个div,里面包含照片的img.就这么多,剩下的效果都是通过CSS来实现的.确保div的class为stackon ...
- html和css的图片怎么加,html+css如何在图片上添加文字
html+css如何在图片上添加文字 2018-09-14 效果如图 思路:div相对定位. 图片默认定位, 文字绝对定位 参考代码 html> /*div1下面 包含着1个图片和1段文字*/ ...
- css3 图片圆形显示 如何CSS将正方形图片显示为圆形图片布局
正方形图片使用CSS如何实现成圆形布局,不使用PS软件处理,直接使用DIV CSS布局如何实现图片圆形化. 正方形图片实现圆形布局 一.图片实现圆形条件 - TOP 原本不是圆形图片,通过CS ...
- html5背景图片能加链接,CSS中用背景图片做为超链接的方法
Web2.0时代,在网页设计中用背景图片做为超链接已成为主流,通过CSS的控制,使鼠标移到图片上能有很好的变换效果,虽然用普通的插入图片的方法也能实现效果,但用CSS更为方便,再配合css sprit ...
- HTML 如何让图片自动改变大小,CSS如何设置图片的大小
原标题:CSS如何设置图片的大小 图片是的基本构成元素,通过img元素的属性值可以调整图片在浏览器中的显示效果,如图片的边框.大小以及为图片设置透明效果等各种样式. 通过img元素的属性值可以调整图片 ...
- html如何实现图片轮流播放,纯css如何实现图片轮播
纯css如何实现图片轮播 发布时间:2020-07-29 10:23:33 来源:亿速云 阅读:119 作者:Leah 纯css如何实现图片轮播?针对这个问题,这篇文章详细介绍了相对应的分析和解答,希 ...
最新文章
- UIView及其分类的属性方法定义
- jmeter全链路压测
- 属性子集选择的基本启发方法_图网络基本属性
- python 除法取整_Python中整数和浮点数
- 复杂风控场景下,如何打造一款高效的规则引擎
- Struts2(补充)
- [转载] 5.2 calendar--通用日期的相关函数(4)
- nginx 安全优化
- java一元稀多项式_数据结构之线性表- 一元稀疏多项式计算器
- 关于Excel导入SqlServer报错的解决
- Python解决乱码 \x222\x22,\x0A
- 矢量网络分析仪是什么?矢量网络分析仪的组成
- SQL异常:exist: integer = character varying
- 用pip安装pytorch
- python中取对数怎么表示_python中取对数
- [JVM]了断局: JDK8默认配置.
- office移动端_3款微软家的超实用APP,终于优化了office移动端!
- 知道swift为什么是面向协议编程么?不知道,还不快来学习!
- PC主机主板OEM密钥读取保存工具
- 计算机 其他 云盘图标,我的电脑“其他”图标怎么删除 我的电脑其他图标删除方法介绍...
热门文章
- 毕业后我尝试过的副业
- 《从程序员到项目经理》读后感-合群
- linux医学软件,Schrodinger Suites 2015-2 Linux版简单安装经验分享
- Java学习_Day 02(学习内容:狂神说JAVA零基础P12-P17)
- 阅文java服务端开发_阅文笔试复盘
- 【贪玩巴斯】C++提高编程,掌握STL中最关键的容器技术~(三){map、set、list、queue、stack 五大容器一篇解决!} //2021-08-25
- C#项目:未找到引用错误解决方案
- 无线路由Buffalo G300N V2 CH小测
- 自建外贸独立站需要多少钱。
- 支付宝APP支付Java服务端