背景图像不显示在Div [英] Background Image Not Displaying On Div
问题描述
出于某种原因，我的网站不想显示我在div上设置的背景图片。
我想要在整个页面上显示精选图片（类似于微软的主页）。但是，图像不想显示。
我试过禁用AdBlock和任何其他扩展功能，我也试图在论坛上查看是否可以找到任何东西（我没有）
以下是我的HTML：
< body>
< div class =container>
< div class =content>
< / div>
< / div>
< / div>
< / body>
和我的'相关'CSS：
.container {
left：15％;
宽度：70％;
margin：0px auto;
}
.content {
background-color：#FFF;
border：1px solid＃F2F2F2;
padding-bottom：100px;
padding：40px;
宽度：90％;
margin：0px auto;
padding-top：100px;
}
.featured-img-display {
width：100％;
身高：100％;
opacity：1;
background-image：url（'/ data / img / game_data / 19a017f91q.jpg'）;
background-size：cover;
背景重复：不重复;
谢谢
小提琴： https://jsfiddle.net/ses3j1Ld/
目前， featured-img-display 元素没有高度。这就是为什么你没有看到背景图像。
height：100％; 只会设置全屏高度如果父元素实际上具有100％的屏幕高度。
要使用％单位执行此操作，您需要确保所有元素达到 featured-img-display 元素的高度为100％，类似于：
html，body，.container，.content {
height：100％
}
然后您的当前CSS代码将工作。有时候，上面的代码不太可行。
在这里使用视口单元： height：100vh; 使事情变得容易很多
注意：
你希望图像跨越整个屏幕高度（没有滚动条），你必须调整你的CSS：
1）删除默认边距 body {margin：0}
2）在元素的父级上设置了填充和边框，背景图片......你可能会想要在图片元素本身设置这些属性，使用 box-sizing 设置为 border-box code>。
Codepen演示 a>
For some reason, my website does not want to display the background-image which I have set on my div.
I want to have a featured image that display's across the whole page (kind of like on Microsoft's homepage). However, the image doesn't want to show.
I have tried disabling AdBlock and any other extensions with no avail, I have also tried to look on forums to see if I could find anything (which I haven't).
The following is my HTML:
<body>
<div class="container">
<div class="content">
<div class="featured-img-display imgdisplay" data-lazyload="undefined" data-bgfit="cover" data-bgposition="right center" data-bgrepeat="no-repeat" data-lazydone="undefined" src="/data/img/game_data/19a017f91q.jpg" data-src="/data/img/game_data/19a017f91q.jpg">
</div>
</div>
</div>
</body>
And my 'relevant' CSS:
.container {
left:15%;
width:70%;
margin:0px auto;
}
.content {
background-color: #FFF;
border: 1px solid #F2F2F2;
padding-bottom:100px;
padding:40px;
width:90%;
margin:0px auto;
padding-top:100px;
}
.featured-img-display{
width: 100%;
height: 100%;
opacity: 1;
background-image: url('/data/img/game_data/19a017f91q.jpg');
background-size: cover;
background-repeat: no-repeat;
}
Thanks
Fiddle: https://jsfiddle.net/ses3j1Ld/
Currently, the featured-img-display element has no height. That's why you don't see the background image.
height: 100%; will only set full screen height on an element if its parent actually has 100% screen height as well.
To do this using % units you'll need to make sure that all elements up to the featured-img-display element have 100% height,.. something like:
html,body,.container,.content {
height: 100%
}
Then your current CSS code will work. Sometimes however the above code isn't so viable.
Using viewport units here: height: 100vh; makes things a lot easier
Note:
If you want the image to span the full screen height (and without scroll-bars), you'll have to adjust your CSS a bit:
1) remove default margin with body { margin:0 }
2) You have set padding and a border on the parent of the element with the background image... you'll probably want to set these properties on the image element itself with box-sizing set to border-box.
Codepen demo
这篇关于背景图像不显示在Div的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
