Question

在通过background-size: cover;标记指定内嵌背景图片时，我无法从我的CSS文件中使用style=""：

CSS

header.hero {
    position: relative;
    clear: both;
    overflow: hidden;
    min-height: 390px;
    background-repeat: no-repeat; 
    background-position: center center; 
    background-size: cover;
    background: #cccccc;
}

HTML

<header class="hero" style="background-image: url('hero.jpeg');"></header>

如果我将!important添加到background-size: cover;，它就能正常运行。为什么我不能在没有!important的情况下使用它？

Answer 1

尝试将background: #cccccc;更改为background-color: #cccccc;。

由于background是一种速记规则，它会覆盖您之前设置的某些值。

初始值，作为速记的每个属性：

background-image: none
background-position: 0% 0%
background-size: auto auto
background-repeat: repeat
background-origin: padding-box
background-clip: border-box
background-attachment: scroll
background-color: transparent

Answer 2

您使用background: #cccccc; 覆盖所有背景样式，因为您没有指定背景属性，因此您应该通过

进行更改

background-color: #cccccc;

通过这种方式，背景颜色将作为颜色属性使用，并且不会覆盖其他属性

为什么背景大小不起作用？

2 个答案: