CSS-不显示背景图片，背景颜色效果很好
[英]CSS - Background image doesn't show, background color works fine
问题描述
My problem is as follows: I replaced some items (navigation, footer) in my HTML-code by adding objects instead and loading them externally. 
我的问题如下：通过添加对象并从外部加载它们，我替换了HTML代码中的某些项目（导航，页脚）。 Since I did that, I can't load background pictures into my 'collage' part of the website. 自从这样做以来，我无法将背景图片加载到网站的“拼贴”部分。
HTML: Stripped it off of everything not part of the problem (except for the content). HTML：从问题中除去所有内容（内容除外）。 The container is just a wrapper for the whole thing. 容器只是整个东西的包装。 My website will contain a bunch of images in the middle that link to the appropriate websites and, on hover over, display a short description and a title. 我的网站将在中间包含一堆图像，这些图像链接到相应的网站，并且悬停在其上时，将显示简短说明和标题。
.collage is used to style the overall frame of the element id will be used to add the background images (worked before!) .collage用于设置元素id的整体框架的样式，将用于添加背景图像（以前已经工作过！）
HTML-Part: 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>
Use the first part for general purposes. 将第一部分用于一般目的。
body : font-size so I can scale all em elements with one value (mobile) body ： font-size所以我可以用一个值缩放所有em元素（移动）
#container : Placed in the middle, positioned accordingly, slightly darker than the overall background. #container ：放置在中间，位置相对应，比整个背景略暗。 Pretty basic 很基本
article .collage : Display as table to make the image hover-over work properly (which it does even now) article .collage ：显示为表格以使图像悬停正常工作（即使现在也是如此）
#cg : The part that isn't working. #cg ： #cg的部分。 I can change the background-color with this tag, but not the image 我可以使用此标签更改背景颜色，但不能更改图像
.text parts : Those are the designs for the hover-over part, they work as far as I can see. .text部件 ：这些是悬停部件的设计，据我所知它们可以正常工作。 I am using opacity to make it invisible, until it is hovered over. 我正在使用不透明度使其不可见，直到将其悬停为止。
CSS-Styling: 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;
}
Folders 资料夹
As I said: I can change the background color fine, hover-over works perfectly. 就像我说的那样：我可以很好地更改背景颜色，悬停效果很好。 The only thing that won't work is the background-images. 唯一不起作用的是背景图像。 Images work fine if I embed them in the html-file. 如果将图像嵌入html文件中，则图像效果很好。
I can't figure it out and a different viewpoint might find the 'Error 30' ;) 我无法弄清楚，可能会从另一个角度发现“错误30” ;）
4 个解决方案
解决方案1
1 已采纳 2015-10-26 11:14:44
All of the other answers are correct, in the sense that your paths are not correct. 在您的路径不正确的意义上，所有其他答案都是正确的。 The reason why this is happening is b/c your CSS file is in, I'm assuming, the "styles" folder, and when you reference your image, the path is assuming that the image is in the same folder as your CSS file. 之所以发生这种情况，是因为您假设CSS文件位于“样式”文件夹中，并且当您引用图像时，该路径假定该图像与CSS文件位于同一文件夹中。
Instead of using ".." to "back out" of a folder, it's always a best practice to use relative paths. 与其使用“ ..”来“退出”文件夹，不如使用相对路径始终是最佳实践。 Reason being, if you move files, folders, etc, then the path will always be correct. 原因是，如果您移动文件，文件夹等，则该路径将始终是正确的。
Hence, instead of using background: url('../cg_collage.jpg') , you should use background: url('/cg_collage.jpg') . 因此，您应该使用background: url('/cg_collage.jpg')而不是background: url('../cg_collage.jpg') background: url('/cg_collage.jpg') 。 The "/" at the beginning tells the file(s) to look at the root and start from there. 开头的“ /”告诉文件查看根目录并从那里开始。 So rather than always counting how many folder structures you need to "drop back", use relative paths. 因此，与其总是计算需要“回退”的文件夹结构的数量，不如使用相对路径。
Also, a good practice is to always have your images in a folder, and name that folder appropriately (eg - "img" or "images" or w/e). 同样，一个好的做法是始终将您的图像放在一个文件夹中，并适当地命名该文件夹（例如-“ img”或“ images”或w / e）。
Helpful article on absolute and relative paths . 关于绝对和相对路径的有用文章。
解决方案2
0 2015-10-26 11:07:57
You have to change your CSS: 您必须更改CSS：
#cg{
background: url("cg_collage.jpg");
}
To: 至：
#cg{
background: url("../cg_collage.jpg");
}
This is because your image is outside styles folder (where your stylesheet is). 这是因为您的图像位于样式文件夹（样式表所在的位置）之外。
解决方案3
0 2015-10-26 11:08:27
I am not sure but CSS is looking for image file in its direcotry (styles). 我不确定，但是CSS正在其目录（样式）中寻找图像文件。 Try this one: 试试这个：
#cg{
background: url("../cg_collage.jpg");
}
解决方案4
0 2015-10-26 11:09:30
You code works perfectly, when the file cg_collage.jpg is in folder /styles. 当文件cg_collage.jpg位于/ styles文件夹中时，您的代码可以完美工作。 Is it there in your project? 在您的项目中吗？
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.