背景img没有显示

我想要使背景标题图像响应。我需要它是视口高度或图像高度的100％，以较小者为准。背景img没有显示

页眉横幅DIV大小看起来是正确的，但图像不似乎显示出来？

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

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; 
 
}

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

来源

2017-08-20 Ng Hui Xiong

图片网址错误，并缺少高度:)请参阅https://jsfiddle.net/pnnxm1yf/3/ – keja

您的图片网址重定向到：'https：// unsplash.com/photos/gzH1qxPLXtA' –

您网址并不是指图像 – Roysh

添加height: 100%您#header-banner。它的高度是0 atm。

来源

2017-08-20 10:00:37 kamyl

您需要将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; 
}

来源

2017-08-20 10:00:44 itodd

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

#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%; 
}

来源

2017-08-20 10:19:51 abhinav3414

如果你解决它，你没有添加图像网址正确&你会得到你的输出正确

<!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>

frame

来源

2017-08-20 11:06:05 Venkataraman

#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;

}

来源

2017-08-20 12:49:03

背景img没有显示

回答

相关问题