background: url('/static/home/laba.svg') center/contain no-repeat;
background简写必须带上center/contain, 能否不写center,就使用默认值?
类似
background: url('/static/home/laba.svg') _/contain no-repeat;
background: url('/static/home/laba.svg') center/contain no-repeat;
background简写必须带上center/contain, 能否不写center,就使用默认值?
类似
background: url('/static/home/laba.svg') _/contain no-repeat;
在CSS中,background
属性的简写形式允许你一次性设置多个背景相关的值,包括背景图片(background-image
)、背景位置(background-position
)、背景大小(background-size
)、背景重复(background-repeat
)等。对于你的问题,background
简写确实允许你省略某些值,并且这些值将回退到其默认值。
在你给出的例子中:
background: url('/static/home/laba.svg') center/contain no-repeat;
这里,center/contain
实际上同时设置了background-position
和background-size
。如果你希望省略background-position
(即背景位置),只设置背景大小,你可以这样做:
background: url('/static/home/laba.svg') /contain no-repeat;
注意,在/
之前,你不需要写任何值来表示background-position
,因为默认情况下,如果省略,背景图像的位置将基于图像的原始大小居中(这取决于其他因素,如background-origin
和background-clip
,但默认行为是居中)。因此,只需在/
前留空,即可省略background-position
,并使用其默认值。
至于你提到的_/contain
这样的写法,它并不是有效的CSS。如果你省略background-position
,应该直接写/
来分隔background-position
和background-size
,如上面所示。
总结:是的,你可以在background
简写中省略background-position
,只需在/
前留空即可。但你的示例_/contain
不是正确的语法。
在 CSS 中,使用 background 简写属性时,如果省略 center 值,它将默认设置为 0% 0%,即将背景图像放置在元素的左上角。不幸的是,你不能使用下划线 _ 作为默认值的占位符。
所以,如果你想使用默认定位,可以简单地省略 center 值:
background: url('/static/home/laba.svg') contain no-repeat;
这将把背景图像放置在默认位置(左上角),并应用 contain 和 no-repeat 值。如果你特别想要居中显示,则需要包括 center:
background: url('/static/home/laba.svg') center/contain no-repeat;
8 回答4.6k 阅读✓ 已解决
6 回答3.3k 阅读✓ 已解决
6 回答2.3k 阅读
5 回答6.3k 阅读✓ 已解决
5 回答1.3k 阅读✓ 已解决
3 回答2.4k 阅读✓ 已解决
3 回答1.4k 阅读✓ 已解决
不行,一定要写。
可选的
/ <bg-size>
是一个整体。但是如果你想用默认值,可以用
top / contain
这样的方式,虽然也是写了但是效果是和没写一样的。