Question

我正在制作一个HTML和CSS的网站，我正在尝试包含和图像，但图像不会出现。这就是我所做的：

HTML部分：

<nav>
<ul>
<div class = "top-links">
<li><a href="index.html">Home page</a></li>
<li><a href="about us.html">About us</a></li>
<li><a href="our songs.html">Our songs</a></li>
<li><a href="see us play.html">See us play</a></li>
<li><a href="Contact us.html">Contact us</a></li>
<li><a href="merchandise.html">Merchandise</a></li>
<li><a href="playing a concert.html">Playing a concert</a></li>
</div>
</ul>
</nav>

CSS部分：

.top-links {
border-style: hidden; 
font-weight: 300;
text-align: center;
line-height: 1.5em;
background-image: url("images/cricket bat and ball.jpg");
}

Answer 1

可能是因为CSS中的图像URL中有空格。尝试将图像重命名为没有空格的东西。

Answer 2

我看到您的代码出现了一些错误，第一个是此行的问题

<div class = "top-links">

你不应该在等号之间有空格 - 这可能适用于某些浏览器，但不是很好的做法，所以可能已经证明你的样式根本没有被拾取。所以我把它改成了这个

<div class="top-links">

下一个问题类似，但这一次是你的CSS

background-image: url("images/cricket bat and ball.jpg");

你不能在图片网址中有空格......你可以再次让你对各种各样的问题开放并再次被认为是不好的做法，我会将你的图像重命名为板球蝙蝠-and-ball.jpg 所以我把那条线改成了这个

background-image: url("images/cricket-bat-and-ball.jpg");

这应该可以解决你的错误 - 我将整个事情放在一起进行测试，它似乎工作得很好，我用占位符图像替换了图像URL，现在正在拾取背景图像

https://jsfiddle.net/xjerfnLd/

Answer 3

.top-links {
border-style: hidden; 
font-weight: 300;
text-align: center;
line-height: 1.5em;
background-image: url("http://i.imgur.com/uYImr7U.jpg");
/*background-image: url("images/cricket_bat_and_ball.jpg");*/
background-size:cover;
background-position: center center;
}

<nav>
<div class = "top-links">
<ul>

<li><a href="index.html">Home page</a></li>
<li><a href="about us.html">About us</a></li>
<li><a href="our songs.html">Our songs</a></li>
<li><a href="see us play.html">See us play</a></li>
<li><a href="Contact us.html">Contact us</a></li>
<li><a href="merchandise.html">Merchandise</a></li>
<li><a href="playing a concert.html">Playing a concert</a></li>
</ul>
</div>
</nav>

它适用于我。

请检查您提供的图像路径。这是对的吗？

希望这有帮助。

在css中制作背景图像是行不通的

3 个答案: