Question

我正面临着一个占用我大量时间的简单问题。

我有一个简单的CSS，它将图像定义为背景：

#header-content{
     background-image: url("../images/header-img.png");
     background-repeat: no-repeat;
     background-position-x: center;
     -webkit-background-size: cover;
     -moz-background-size: cover;
     -o-background-size: cover;
     background-size: cover;
}

HTML页面中具有此ID的div：

<!-- HEADER -->
<div id="header">
    <div class="container-fluid">
         <div class="row">
             <div class="col-md-12">
                 <div id="header-content">

                 </div>
             </div>
         </div>
     </div>
 </div>
<!-- HEADER -->

很简单。但图像未显示。可能是什么问题呢？

P.S。：图像目录是正确的。

Answer 1

你的问题可能是＃header-content div没有任何大小。尝试添加：height: 100px; width: 200px

＆＃13;

#header-content{
 background-image: url("http://unsplash.com/photos/1-ISIwuBMiw/download");
 background-repeat: no-repeat;
 background-position-x: center;
 -webkit-background-size: cover;
 -moz-background-size: cover;
 -o-background-size: cover;
 background-size: cover;
 height: 100px;
 width: 200px;
}

＆＃13;

<!-- HEADER -->
<div id="header">
    <div class="container-fluid">
         <div class="row">
             <div class="col-md-12">
                 <div id="header-content">

                 </div>
             </div>
         </div>
     </div>
 </div>
<!-- HEADER -->

＆＃13;

Answer 2

无需设置<br>（DOV的默认值为100％），但如果您在该DIV中没有任何内容，则必须设置width值让DIV看到背景（如果没有，它的0px高=不可见）。

Answer 3

将height和width设置为#header-content。

Answer 4

此外，在设置高度时，请尝试使用与百分比（％）不同的测量单位，因为百分比有时可能无法正常工作，并且不会显示。您可以使用px或vh。

Answer 5

因为您尚未在css代码中定义height和width: 400px; height: 400px;。例如，将这些#header-content {}添加到width的第一个，它就可以了。您也可以在不使用height和\b属性的情况下为正文甚至HTML标记执行此操作。

CSS背景图像样式通过ID选择器不应用

5 个答案: