Question

我正在尝试使用CSS background-image属性内联，以便根据用于访问页面的链接显示不同的背景图像，并在CSS样式表中设置其余属性。

HTML：

<body>
    <div class="imagecontainer" style="background-image: url('gallery/images/<?php echo $image;?>');">
</body>

CSS：

.imagecontainer{
    margin: 0 auto;
    width: 100%;
    background-size: contain;
    background-repeat: no-repeat;
    display: inline-block;
    text-align: right;
}

浏览器中的开发人员视图显示图像和CSS文件已正确链接，但未显示任何内容。任何帮助非常感谢。感谢。

Answer 1

您还需要为height课程添加.imagecontainer值。如果未提供内容或子节点，则默认情况下div元素具有height = 0。

.imagecontainer{
    margin: 0 auto;
    width: 100%;
    height: 100px; // or any other value
    ...

Answer 2

您将高度设置为div样式，例如

.imagecontainer{
    margin: 0 auto;
    width: 100%;
    height:200px
    background-size: contain;
    background-repeat: no-repeat;
    display: inline-block;
    text-align: right;
}

Answer 3

当div为空时，高度自动为0px，以便填充它。试试这个：

<body>
    <div class="imagecontainer"
style="background-image: url('gallery/images/<?php echo $image;?>');">&nbsp;</div>
</body>

PS：注意  它可能会有所帮助;）或者在css中给它一个固定的高度：

height:"yourheight"px;

Answer 4

你遇到的问题是Div是持平的。它没有大小，所以它存在，但你看不到它，因为它的大小是0px X 1000px（例如）

我建议您在Div中添加一些内容，或者只在CSS上设置高度

.imagecontainer{
  margin: 0 auto;
  width: 100%;
  height: 50%
  background-size: contain;
  background-repeat: no-repeat;
  display: inline-block;
  text-align: right;
}

Answer 5

当您使用图像作为背景时，必须指定其高度（或基于应用程序的宽度）

.imagecontainer{
    width: 100%;
    height: 100px;

}

如果您想根据图片大小设置背景：

div {
    background-image:url('smiley.gif');
    background-repeat:no-repeat;
    background-size:auto;
}

它因为背景属性的重复特性，当你只使用一个没有其他元素的div时，div的高度等于零，要找出我的意思，请将代码更改为：

<body>
    <div class="imagecontainer" style="background-image: url('gallery/images/<?php echo $image;?>');">
         Test
    </div>
</body>

在此代码中，您的div高度将等于test字体大小加上其边距和填充。

内联CSS背景图像不显示

5 个答案: