Question

好。我在div中的图像有问题。修复div中的图像以进行视差滚动。这就是我想要做的。我有一个div。这是代码。

 #container{ 
height: 500px;
margin: 0 auto; 
width: 100%; 
max-width: 1920px; 
position: relative;
overflow: hidden;
}

现在我想在那里添加一个固定的图像。

 #container-img{ 
position: absolute;
background-position:top center;
margin-right:0px;
bottom:0;   
height: 500px;
margin: 0 auto; 
width: 100%; 
max-width: 1920px; 
display-inline: block;

 }

我的问题是我想在div中修复图像，它遍布整个地方。我不想通过css添加图像，因为我在Wordpress中有人通过仪表板在需要时更改图像。这是HTML

 <div id="container" >
 <img id="container-img" src="<?php echo get_template_directory_uri(); ?>/images/home.jpg"/>
 </div>

我希望css能够修复图像，而不是在div之外吗？有解决方案吗谢谢。

Answer 1

display-inline: block;不是有效的CSS。尝试使用display: block。此外，由于您没有指定任何背景图片，因此不需要background-position:top center;。

我建议您仍然使用background-size: cover;的背景图片，否则您将很难扭曲图像比例。

您需要将图像以内联样式放在容器上：

<div id="container" style="background-image: url('<?php echo get_template_directory_uri(); ?>/images/home.jpg')">

希望有所帮助。

修复div中的图像以进行视差滚动。

1 个答案: