背景img不显示
[英]Background img not showing up
问题描述
I am trying to make a background header image to be responsive. 
我正在尝试使背景标题图像具有响应性。 I need it to be 100% of the viewport height or the image height, whichever is smaller. 我需要将其设置为视口高度或图像高度的100％，以较小者为准。
An example would be the header banner similar to https://brittanychiang.com/v1/ 一个示例是类似于https://brittanychiang.com/v1/的标题横幅
The div size looks correct but the image don't seems to be showing up? div大小看起来正确，但是图像似乎没有显示出来吗？
Created a jsfiddle here : https://jsfiddle.net/pnnxm1yf/2/ 在这里创建了一个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>
5 个解决方案
解决方案1
0 2017-08-20 10:00:37
Add height: 100% to your #header-banner . 增加height: 100% #header-banner height: 100% 。 Its height is 0 atm. 高度为0 atm。
解决方案2
0 2017-08-20 10:00:44
You need to add the height property onto the same element that has the background image. 您需要将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;
}
解决方案3
0 2017-08-20 10:19:51
Adding height to your header-banner will solve the issue. 为标头横幅增加高度可以解决此问题。 Plus, please get your image url correct. 另外，请正确输入图片网址。
#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%;
}
解决方案4
0 2017-08-20 11:06:05
you did not add the img url properly & if you solve it you will get your output properly 您没有正确添加img网址，如果您解决了它，则将正确获得输出
<!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>
解决方案5
0 2017-08-20 12:49:03
#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;
} }
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.