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

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