2 个带有背景图像和内容的容器答案

【问题标题】：2 containers with background images and content2 个带有背景图像和内容的容器
【发布时间】：2013-07-25 04:52:24
【问题描述】：

我一直在搞乱这段代码，试图学习 CSS。我已经尝试了很多但没有取得太大进展......最终我希望有 2 个容器，每个容器都有自己的背景图像，然后我希望能够在这些单独的容器中上传内容（youtube 视频、文本等）。

第一个容器是我想要的位置，带有我想要的图像，但图像不充当背景图像，因为我无法向其中添加任何内容。第二个容器将在此右侧。

这是我尝试制作的容器的代码。

#container .image-container {
    width:350px;
    padding:0px;
    border:5px solid gray;
    margin-top:0px;
    margin-bottom:0px;
    margin-right:0px;
    margin-left:-40px;
}

谢谢！

【问题讨论】：

标签： css image containers

【解决方案1】：

如果您在 div 中添加带有标签的图像，则该图像将位于内容的顶部。

如果你想让图片在背景上，你必须把它放在你的css上：

background-image: url(../images/example.png);

然后您将内容添加到您的容器中，并将位于图像的顶部

至于第二个容器，我在您的页面中找不到第二个容器。

document.getElementsByClassName("image-container");
[
    <div class="image-container">…</div>
]

如果你想让它们并排，你可能想在这个下面添加它。

然后您可以检查此question 将它们并排放置。

【讨论】：

我尝试将 background-image 添加到 #container id 和 .image-container 类，但没有成功。我的图片是 jpg，这有关系吗？
应该不是jpg的问题。你确定你给了它正确的道路吗？
是的，当我将它作为图片上传到我的内容区域时，img 路径运行良好。
但是现在你在 css 上。您的 css 文件是否与 html 文件位于同一目录中？
是吗？我正在使用 Wordpress，所以我假设它将它们放在同一个目录中？抱歉，我对这一切都非常陌生。