background-repeat space/round属性

姘搁『发布于2019-08-29 15:34 / 3411人阅读

摘要：容器空间小于图片背景图不会产生缩放，会被裁切缩放背景图至容器大小非等比例缩放上面为下图为容器空间大于图片在不缩放的前提下尽可能多的重复图片充分利用容器空间，重复次之后轴方向如果剩余空间大于等于则重复第次，否则拉伸已经重复的背景图

1.容器空间小于图片

div {
    width: 200px;
    height: 200px;
    border: solid 1px red;
    background-color: #fff3d4;
    background-size: 300px;
    background-image: url(./moon.jpg);
}
.test1 {
    background-repeat: space;
}
.test2 {
    background-repeat: round;    
}

space 背景图不会产生缩放，会被裁切
round 缩放背景图至容器大小（非等比例缩放）

（上面为space下图为round）

2.容器空间大于图片

div {
    width: 200px;
    height: 100px;
    border: solid 1px red;
    background-color: #fff3d4;
    background-size: 60px;
    background-image: url(./moon.jpg);
}
.test1 {
    background-repeat: space;
}
.test2 {
    background-repeat: round;    
}

space 在不缩放的前提下尽可能多的重复图片
round 充分利用容器空间，重复n次之后（x/y轴方向）如果剩余空间大于等于imgWidth*50%则重复第n+1次，否则拉伸已经重复的背景图

云服务器私有云删除属性设置属性属性编号属性遍历

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/113404.html

关于CSS中的背景属性background简述

摘要：属性控制背景图片在被属性改变了大小及被属性定位后如何平铺。可用于此属性的关键字为和。对于长度和百分比，我们也可以指定沿轴和轴的位置。属性指定背景图片应根据盒模型的哪个区域进行定位。最后，属性是其他背景相关属性的简写。像我之前提到的那样，文档树中的每个元素只是一个矩形盒子。这些盒子都有一个背景层，背景层可以是完全透明或者其它颜色，也可以是一张图片。此背景层由8个CSS属性（加上1个简写...

tomorrowwu 2019-08-02 16:15 评论0 收藏0
关于CSS中的背景属性background简述

摘要：属性控制背景图片在被属性改变了大小及被属性定位后如何平铺。可用于此属性的关键字为和。对于长度和百分比，我们也可以指定沿轴和轴的位置。属性指定背景图片应根据盒模型的哪个区域进行定位。最后，属性是其他背景相关属性的简写。像我之前提到的那样，文档树中的每个元素只是一个矩形盒子。这些盒子都有一个背景层，背景层可以是完全透明或者其它颜色，也可以是一张图片。此背景层由8个CSS属性（加上1个简写...

tianren124 2019-08-29 18:45 评论0 收藏0
CSS background系列属性

摘要：通过该属性可以控制绘制的区域。背景图片相关的属性背景图片本身是有自身尺寸的，被应用元素也有自己的尺寸。通过属性可以修改原点位置。坐标系的反方向都是重复方式绘制。该位置是相对于原点构建的坐标系，默认情况下该位置就是在原点。一、元素背景是指哪些区域默认情况下元素的背景是指元素border（包含border）以内的区域。 showImg(https://segmentfault.com/...

mrcode 2019-08-29 17:30 评论0 收藏0
回味background

摘要：就目前为止，还没有到好玩的地步，只要知道会盖在上面，然后如果在后面写半角英文逗号的话，就可以玩多背景图了，比如。 background是在CSS中使用率很高的一个属性之一，由最初的几个简单的属性到现在新增了很多的属性，比如background-size、background-origin以及background-clip等属性，还可以设置多背景来达到更多的炫酷效果。以下要谈的...

aboutU 2019-08-28 18:04 评论0 收藏0
css基础

摘要：引入浏览器私有属性规则语法标识符标识符常用选择器简单选择器标签选择器类选择器选择器通配符选择器属性选择器选中属性属性包含属性选中属性值等于或开头的选中属性值以开头的选中属性值以结尾的选中属性值包含的伪类选择器以上两个只用引入 body{ margin: 0; } 浏览器私有属性 chrome...

ThreeWords 2019-08-29 13:19 评论0 收藏0