Question

我正在尝试使背景标题图像具有响应性。我需要它是视口高度的100％或图像高度，以较小者为准。

的标题横幅

div大小看起来是正确的，但图像似乎没有出现？

在这里创建了一个jsfiddle：https://jsfiddle.net/pnnxm1yf/2/

＆＃13;

header {
    height: 100vh;
    max-height: 850px;
}

#header-banner {
    color: #fff;
    background: linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0.5)),url(https://unsplash.com/?photo=gzH1qxPLXtA) center center no-repeat;
    background-size: cover;
    position: relative;
}

＆＃13;

<p>Why is my image not showing up?</p>
<header>
  <section id="header-banner">
  </section>
</header>
 <p>content after image</p>

＆＃13;

Answer 1

将height: 100%添加到#header-banner。它的高度是0大气压。

Answer 2

您需要将height属性添加到具有背景图像的同一元素上。

#header-banner {
    height: 100vh;
    max-height: 850px;
    color: #fff;
    background: linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0.5)),url(https://unsplash.com/?photo=gzH1qxPLXtA) center center no-repeat;
    background-size: cover;
    position: relative;
}

Answer 3

为标题横幅添加高度可以解决问题。另外，请将您的图片网址正确。

#header-banner {
    color: #fff;
    /* background: #ffffff url(img_tree.png) center center no-repeat; */
    background: linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0.5)),url(https://unsplash.com/?photo=gzH1qxPLXtA) center center no-repeat;
    background-size: cover;
    /* background-color: red; */
    position: relative;
    height: 100%;
    width: 100%;
}

Answer 4

你没有正确添加img url＆amp;如果你解决它，你将得到你的输出适当

＆＃13;

<!DOCTYPE html>
<html>
<head>
<style> 
#borderimg { 
    border: 10px solid transparent;
    padding: 15px;
    -webkit-border-image: url(border.png) 30 round; /* Safari 3.1-5 */
    -o-border-image: url(border.png) 30 round; /* Opera 11-12.1 */
    border-image: url(border.png) 30 round;
}
</style>

<p id="borderimg">Here, the middle sections of the image are repeated to create the border.</p>

</body>
</html>

＆＃13;

frame

Answer 5

#header-banner {
  height: 100%;
  color: #fff;
  background: linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0.5)), url('https://images.unsplash.com/photo-1502582877126-512f3c5b0a64?dpr=1&auto=format&fit=crop&w=1500&h=1001&q=80&cs=tinysrgb&crop=') center center no-repeat;
  background-size: cover;
  position: relative;

}

背景img没有出现

5 个答案: