Question

昨天我正在创建一个HTML元素，这个问题让我感到震惊。 DIV的背景图像没有显示，我很好奇，链接工作正常。

这是我的代码

<div id="floating-image-<?php echo $id; ?>" class="fl-<?php echo $id; ?>" style="
    background-image: url(https://images.pexels.com/photos/290470/pexels-photo-290470.jpeg?h=350&auto=compress&cs=tinysrgb);
    margin-top: 20px;
	  height: 200px;
    width: 200px;
    background-position: center center;
	  background-repeat: no-repeat;
	  transform: translateY(0px);
    background-size: contain;
	  position: relative;
    margin-right: auto;
	  margin-left: auto;
    max-width: 80%;
    display:block;
    "></div>

修改好吧，我编辑了动态代码并用一些静态输出替换它们。很抱歉误导 另一个编辑 我改变了图像，现在我使用的是较小的图像，但仍然没有显示

Answer 1

我已经检查过，背景图片正常工作。您的图像尺寸非常大，大约7 MB。将其减少到300KB，太大而无法显示。

Answer 2

问题出在图片中，您使用了非常高质量的图像。如果您使用的图像质量低于目前使用的图像，它会正常工作。

Answer 3

解决方案只能由我解决，因为它包含在项目中。

感谢您的帮助，如果我找到了真正的解决方案，我会在此发布。

修改

好吧，我现在感觉很糟糕，关于我生命中的浪费时间。

无论如何，我找到了解决方案，这是关于动画的。我在我的主题中制作了这个功能，因此用户可以轻松创建动画。

整个故事用几句话来概括，“没有在父节中启用动画，所以普通的css代码为.class { OPACITY：0; }”。

抱歉！并感谢您对此类问题的深切关注

背景图像没有显示出来

3 个答案: