HTML-部分：

Question

我的问题如下：我通过添加对象并在外部加载来替换我的HTML代码中的一些项目（导航，页脚）。由于我这样做，我无法将背景图片加载到网站的“拼贴”部分。

HTML：从一切不是问题的部分（内容除外）中删除它。容器只是整个事物的包装。我的网站将在中间包含一系列链接到相应网站的图片，并在鼠标悬停时显示简短描述和标题。

.collage用于设置元素的整体框架的样式 id将用于添加背景图像（之前工作过！）

HTML-部分：

<!DOCTYPE HTML>

<head>
   <link rel="stylesheet" type="text/css" href="styles/main.css">
   <title>Startseite</title>
</head>

<html>
    <body>

    <div id="container">

        <article>       
            <div class="collage" id="cg">
                <a href="#">
                    <div class="text">

                        <h2>CG-Projekte</h2>
                        <p>
                            Computergerenderte Projekte, basierend auf         der Open-Source-Software 'Blender', sowie Tutorials für einige der Projekte.
                        </p>
                    </div>
                </a>
            </div>

        </article>

    </div>

    </body>
</html>

将第一部分用于一般目的。

body ：font-size所以我可以使用一个值（移动）扩展所有em个元素

#container ：放置在中间，相应地定位，比整体背景稍暗。很基本的

article .collage ：显示为表格以使图像悬停正常工作（即使现在也可以）

#cg ：无效的部分。我可以使用此标记更改背景颜色，但不能更改图像

.text部分：这些是悬停部分的设计，它们的工作范围我可以看到。我正在使用不透明度使其不可见，直到它悬停在上面。

CSS-样式：

*{
    margin: 0;
    padding: 0;
}

body{
   font-size: 100%;
   background-color:#2B2B2B;
}

#container{
margin: 0 auto;
margin-top: 100px;
min-height: 50em;
min-width: 70em;
max-width: 80em;
background-color: #2A2A2A;
border: 2px solid white;
}

article .collage {
display: table;
height: 500px;
width: 700px;
margin: 100px 0 0 5px;
border: 1px white solid;
}

#cg{
background: url("cg_collage.jpg");
}

article div .text{
    height: 400px;
    width: 800px;
    background: rgba(0,0,0,0.55);
    position: relative;
    top: 0;
    left: 0;
    vertical-align: middle;
    display: table-cell;
    opacity: 0;
    transition: all ease-in 0.1s;
}
article .collage a{
    text-decoration: none;
}

article .collage .text{
    padding: 0 10px 0 10px;
}

article .collage .text h2{
    text-align: right;
    text-decoration: none;
    color: #ADFF5C;
    line-height: 70px;
    font-size: 40px;
    font-family: monospace;
    border-bottom: 3px ridge #FFFFFF;
    line-height: 50px;
}

article .collage .text p{
    text-align: right;
    font-family: Arial, Helvetica, sans-serif;
    margin-top: 5px;
    color: #ADFF5C;
}

article div:hover .text{
    opacity: 1;
}

文件夹

正如我所说：我可以改变背景颜色，悬停效果很好。唯一不起作用的是背景图像。如果我将它们嵌入到html文件中，图像就可以正常工作。

我无法弄明白，不同的观点可能会找到'错误30';）

Answer 1

所有其他答案都是正确的，因为您的路径不正确。发生这种情况的原因是b / c你的CSS文件，我假设，“styles”文件夹，当你引用你的图像时，路径假设图像与你的CSS文件在同一个文件夹中

使用相对路径始终是最佳做法，而不是使用“..”来“退出”文件夹。原因是，如果您移动文件，文件夹等，那么路径将始终是正确的。

因此，您应该使用Crosstab should have at least one column group，而不是使用background: url('../cg_collage.jpg')。开头的“/”告诉文件查看根并从那里开始。因此，不要总是计算需要“退回”的文件夹结构数量，而是使用相对路径。

此外，一个好的做法是始终将您的图像放在一个文件夹中，并恰当地命名该文件夹（例如 - “img”或“images”或w / e）。

有关absolute and relative paths的文章。

Answer 2

你必须改变你的CSS：

C3

要：

#cg{
  background: url("cg_collage.jpg");
}

这是因为您的图片位于样式文件夹（样式表所在的位置）之外。

Answer 3

我不确定但是CSS正在寻找图片文件（样式）。试试这个：

#cg{
    background: url("../cg_collage.jpg");
}

Answer 4

当文件cg_collage.jpg位于文件夹/样式中时，您的代码可以正常工作。它在你的项目中吗？

CSS - 背景图像不显示，背景颜色工作正常

HTML-部分：

CSS-样式：

4 个答案: