CSS background |
您所在的位置：网站首页 › css背景重复 › CSS background |
CSS background
|
👻
DeathGhost
HTML
CSS
JavaScript
Angular
Hello Mobile
📲
登录
CSS background-repeat 背景图的重复方式
这篇文章发布于 2020-07-01 22:12:29 由 DeathGhost 编辑， 归类于 css » 当前评论 0 条。 我们都知道background-repeat 是 CSS 属性定义背景图像的重复方式。背景图像可以沿着水平轴，垂直轴，两个轴重复，或者根本不重复，今天看看另2个属性值效果。通常我们会给background-image通过background-repeat定义其图像重复的方式。如，纵向重复、横向重复、纵横重复或不重复。 
CSS background-repeat 背景图的重复方式
语法
background-repeat: repeat-x;
background-repeat: repeat-y;
background-repeat: repeat;
background-repeat: no-repeat;
使用最多的可能就是上面这些，下面看看另两种属性值： background-repeat: space; background-repeat: round;默认情况下，重复的图像被剪裁为元素的大小，但它们可以缩放 (使用 round) 或者均匀地分布 (使用 space)。 round ： 随着允许的空间在尺寸上的增长, 被重复的图像将会伸展(没有空隙), 直到有足够的空间来添加一个图像. 当下一个图像被添加后, 所有的当前的图像会被压缩来腾出空间。 space ： 图像会尽可能得重复, 但是不会裁剪. 第一个和最后一个图像会被固定在元素(element)的相应的边上, 同时空白会均匀地分布在图像之间. background-position属性会被忽视, 除非只有一个图像能被无裁剪地显示. 只在一种情况下裁剪会发生, 那就是图像太大了以至于没有足够的空间来完整显示一个图像。 双值语法 background-repeat: repeat space; background-repeat: round space; background-repeat: no-repeat round;写法和平时一样，水平|垂直。 演示 repeat 演示 round 演示 space 演示 space round 双值演示 HTML 与 CSS 示例代码图片大小200*200（单位：px），创建一个400*200（px）的可收缩容器进行演示。 .wrap{ background-image: url('http://www.deathghost.cn/public/images/avatar.jpg'); /* background-repeat: space; */ /* background-repeat: round; */ /* background-repeat: space round; */ resize: both; width: 400px; height: 200px; border: 1px orangered solid; overflow: hidden; }具体应用场景根据实际设计而定。 CSS background-repeat repeat repeat-x no-repeat space round 背景图 重复 完整背景图 上一篇： CSS Emphasis Marks 文本强调标记 下一篇： CSS container容器查询
✨
Web Worker 简单实例应用
前端页面开发过程中或多或少会使用setInterval()与setTimeout()方法，这两天准备用它们做个简单的页面...2023-09-04 19:43:06 
微信打赏 
支付宝打赏 😁如果这篇文章对你有所帮助，你可以将其分享到朋友圈哦(●'◡'●) 
在任何媒介以任何形式复制、发行本作品。惟须遵守下列条件：
署名 — 您必须给出适当的署名，提供指向本许可协议的链接，同时标明是否（对原始作品）作了修改。您可以用任何合理的方式来署名，但是不得以任何方式暗示许可人为您或您的使用背书。
非商业性使用 — 您不得将本作品用于商业目的。
禁止演绎 — 如果您 再混合、转换、或者基于该作品创作，您不可以分发修改作品。
©️ DeathGhost 署名-非商业性使用-禁止演绎（CC BY-NC-ND） 🔑GitHub登录Design By 👻 DeathGhost 陕ICP备18009319号 ©️ 2014 - 2024 deathghost.cn 版权所有，本站内容仅供参考，多关注，共进步！ |
【本文地址】
今日新闻 |
推荐新闻 |