background-image: 设置背景图像, 可以是真实的图片路径, 也可以是创建的渐变背景; background-position: 设置背景图像的位置(相对于原点),(原点由left/top/bottom/right中的临近的两个组合起来就可以描述,而这四个角是位于border-box中还是padding-box中还是content-box中则是由下面的origin属性来表示); 取值: ri...
background-position: top;仅给定一个值,那么第二个值将是"center"。 注意一个问题:给一个值,并不一定是设置background-position-x,要根据参数定。left center right自然是设置x轴,top center bottom是对应y轴。 b、两个参数 background-position:x% y%|x pos y pos|center center。 第一个设置x轴偏移,...
相对定位同时设置top和bottom值时top生效。同时设置left和right时,left生效 当盒子本身自己发生变化,而不影响其他元素,这时我们就可以用相对定位 position:absolute;绝对定位 脱离文档流 在不设置参照物时,参照物是body 人为设置参照物时,需要这个绝对定位的父级元素 参照物必须带有定位属性 平级之间不能作为参照物来用...
用','隔开每组background的缩写值;如果有 size 值,需要紧跟 position 并且用 "/" 隔开; background : [background-color] | [background-image] | [background-position][/background-size] | [background-repeat] | [background-attachment] | [background-clip] | [background-origin],... Note:缩写...
1、此时无效的background-position属性会生效,当背景显示区域只能显示出一张图像时,我们就使用background-position的属性来控制这个图片的定位。 2、当平铺图像尺寸比背景显示区域尺寸大,在不同浏览器中就会显示不同的效果,图像在Chrome和Firefox浏览器中可以显示,图像在IE和Edge中是无法显示出来的,所以我们如果使用space...
官方推荐顺序为:background: background-color,background-image,background-repeat,background-attachment,background-position; 不强制要求书写顺序 简写语法 单独设置样式 Background 基础篇 这里给大家展示一下几个常见的background的属性的用法: 代码语言:javascript ...
(https://study.miaov.com/img/pc/remote_chapter/bannerBg.png)no-repeat center;background-size:cover;position:relative;filter:blur(6px);}.m-login{position:absolute;width:500px;height:250px;border-radius:10px;border:1px solid #fff;top:50%;left:50%;margin-top:-100px;margin-left:-250px;...
其中的no-repeat就相当于单独设置background-repeat: no-repeat,很常用,就是为了不让背景图重复平铺,因为默认是横向和纵向都会平铺的。 接下来,我将具体讲讲background-repeat的几个属性值。 一、repeat、repeat-x、repeat-y 1. repeat 默认值,横向和纵向平铺,但平铺最终的效果还跟background-position有关。例如:...
repeat 默认值 , 背景会沿着x轴 y轴双方向重复 repeat-x 沿着x轴方向重复 repeat-y 沿着y轴方向重复 no-repeat 背景图片不重复例: background-repeat: no-repeat; 1background-position 用来设置背景图片的位置设置方式: 通过top left right bottom center 几个表示方位的词来设置背景图片的位置 使用方位词时必...
上面的网页中之所以会显示满屏的图案是因为background-repeat在作祟!虽然上面的代码中我们没有写这个background-repeat,但它确实是生效了。因为这是默认属性在搞鬼!为了让看官们更加清楚这一点,接下来我们还是看手册中的说明吧。 语法: background-repeat:<repeat-style> [ , <repeat-style> ]* ...