Fatal编程技术网
  • html/
  • Html 背景图像未显示在Div上

Html 背景图像未显示在Div上

html css

Html 背景图像未显示在Div上,html,css,background-image,Html,Css,Background Image,由于某些原因，我的网站不想显示我在div上设置的背景图像 我想有一个特色的图像，显示在整个页面上（有点像微软的主页）。但是，图像不想显示 我尝试过禁用AdBlock和任何其他扩展，但没有任何效果，我也尝试过在论坛上查看是否可以找到任何东西（我还没有找到） 以下是我的HTML： <body> <div class="container"> <div class="content"> <div class="featured-img-display i

由于某些原因，我的网站不想显示我在div上设置的背景图像

我想有一个特色的图像，显示在整个页面上（有点像微软的主页）。但是，图像不想显示

我尝试过禁用AdBlock和任何其他扩展，但没有任何效果，我也尝试过在论坛上查看是否可以找到任何东西（我还没有找到）

以下是我的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>
谢谢

Fiddle:

代替div，您可以尝试使用img标签吗。我想这可能行得通

目前，
特色img显示屏
元素没有高度。这就是为什么你看不到背景图像

高度：100%将仅在元素上设置全屏高度

要使用%单位执行此操作，您需要确保
特色img显示
元素的所有元素都具有100%的高度，。。比如：


html,body,.container,.content {
     height: 100%
}


那么您当前的CSS代码就可以工作了。然而，有时上面的代码并不那么可行

使用视口单位此处：
高度：100vh使事情变得容易多了



注:

如果您希望图像跨越全屏高度（并且没有滚动条），则必须稍微调整CSS：

1） 使用
正文{margin:0}删除默认边距

2） 您已经在具有背景图像的元素的父元素上设置了填充和边框。。。您可能希望在图像元素本身上设置这些属性，并将
框大小设置为
边框框


.characterized img
的高度是使其工作的百分比值。必须确定父元素的高度，唯一的例外是根元素
html
，它可以是百分比高度



body，html{
身高：100%；
宽度：100%；
}
.集装箱{
左：15%；
宽度：70%；
身高：100%；
保证金：0px自动；
}
.内容{
背景色：#FFF；
边框：1px实心#F2F2；
填充底部：100px；
填充：40px；
宽度：90%；
身高：100%；
保证金：0px自动；
填充顶部：100px；
}
.特色img显示{
宽度：100%；
身高：100%；
不透明度：1；
背景图像：url（'http://i.imgur.com/IMiabf0.jpg');
背景尺寸：封面；
背景重复：无重复；
}


好吧，你所有的div
.container
、
.content
和
。特色的img显示屏
都没有高度<代码>高度：100%
表示高度等于元素的父元素，但由于这些元素都没有任何高度，
高度：100%
等于0px。宽度也是如此


因此，其中一个div必须具有特定的高度和宽度。这里有一个：
打开开发者工具（F12）并检查错误。一个可能的原因是没有为背景图像提供正确的url（我认为实际路径是根据css位置计算的）。您是否检查了文件的路径？
高度：100%
如果父容器本身没有高度，将导致高度为零。链接到网站或小提琴？如果您的网站处于活动状态，您能否提供该网站的链接？或者请创建一个plunkr。我之所以使用div，是因为我认为它看起来更干净，而且我希望在div顶部输出代码

html,body,.container,.content {
     height: 100%
}