CSS

Question

我的问题如下：我通过添加 objects 替换了 HTML-code 中的一些项目（导航、页脚）并从外部加载它们。因为我这样做了，我无法将背景图片加载到网站的 'collage' 部分。

HTML：去掉了所有不属于问题的部分（内容除外）。容器只是整个事物的包装器。我的网站将在中间包含一堆图片 link 到相应的网站，悬停在上面时会显示简短的描述和标题。

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

HTML-Part:

<!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：显示为 table 以使图像 hover-over 正常工作（即使现在也能正常工作）

#cg：不工作的部分。我可以使用此标签更改 background-color，但不能更改图像

.text部分：这些是hover-over部分的设计，据我所知它们是有效的。我正在使用 opacity 使其不可见，直到它悬停在上方。

CSS-Styling:

*{
    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;
}

文件夹

正如我所说：我可以很好地更改背景颜色，hover-over 效果很好。唯一不起作用的是 background-images。如果我将图像嵌入到 html-file.

中，图像就可以正常工作

我想不通，不同的观点可能会找到 'Error 30' ;)

Answer 1

你必须改变你的 CSS:

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

收件人：

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

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

Answer 2

我不确定，但 CSS 正在其目录（样式）中查找图像文件。试试这个：

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

Answer 3

当文件 cg_collage.jpg 位于文件夹 /styles 中时，您的代码可以完美运行。它在你的项目中吗？

Answer 4

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

不要使用“..”到文件夹的 "back out"，最好使用相对路径。原因是，如果您移动文件、文件夹等，那么路径将始终是正确的。

因此，您不应使用 background: url('../cg_collage.jpg')，而应使用 background: url('/cg_collage.jpg')。开头的“/”告诉文件查看根目录并从那里开始。因此，不要总是计算需要多少个文件夹结构 "drop back"，而是使用相对路径。

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

关于 absolute and relative paths 的有用文章。

CSS - 背景图片不显示，背景颜色正常

CSS - Background image doesn't show, background color works fine

html

background-image

HTML-Part:

CSS-Styling: