Question

当我在CSS代码中使用图像时，图像未显示在页面上。我已经使用了几个CSS技巧，但是图像没有显示在页面上

.header-image {
  background-image: url('img/billboard.jpg');
}

@media only screen and (min-device-width: 400px) {
  .header-image {
    background-image: url(../img/billboard.jpg);
  }
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<div class="header-image">
  <div class="bottom-left"></div>
  <div class="top-left container">
    <img src="img/icon.png" height="48px" width="98px">
    <p class="f-s-7">EXPERIENCE EXCELLENCE</p>
  </div>
  <div class="top-right">
    <ul class="list-inline">
      <li></li>
      <li><a href="#" class="cl-black" id="text-decorate-none">CAREERS</a></li>
      <li><a href="#" class="cl-black" id="text-decorate-none">CLIENT LOGIN</a></li>
      <li><a href="#" class="cl-black" id="text-decorate-none">CONTACT US</a></li>
      <li><img src="img/social-icons/linkedin.png" class="social"></li>
      <li><img src="img/social-icons/facebook.png" class="social"></li>
      <li><img src="img/social-icons/twitter.png" class="social"></li>
      <li><img src="img/social-icons/instagram.png" class="social"></li>
    </ul>
    <ul class="list-inline">
      <li><a href="#" class="cl-black" id="text-decorate-none">WHY WAVEX</a></li>
      <li>|</li>
      <li><a href="#" class="cl-black" id="text-decorate-none">MANAGED IT SERVICES</a></li>
      <li>|</li>
      <li><a href="#" class="cl-black" id="text-decorate-none">SECURITY SERVICES</a></li>
      <li>|</li>
      <li><a href="#" class="cl-black" id="text-decorate-none">CLOUD SECVICES</a></li>
      <li>|</li>
      <li><a href="#" class="cl-black" id="text-decorate-none">PROJECTS & IT SOLUTIONS</a></li>
      <li>|</li>
      <li><a href="#" class="cl-black" id="text-decorate-none">BUSINESS STRATEGY</a></li>
    </ul>
  </div>
  <div class="bottom-right">Bottom Right</div>
  <div class="centered">Centered</div>
</div>

在div中使用<img>标签可显示图片，但在CSS中则不显示。
我使用的CSS代码是：

background-image: url(../img/billboard.jpg);
background-image: url('../img/billboard.jpg');
background-image: url(img/billboard.jpg);
background-image: url('/img/billboard.jpg');

以上代码均无效。请帮助！！

Answer 1

我认为您为背景图片选择了错误的路径。尝试设置正确。希望能解决您的问题。

<style>
    .header-image {
        background-image: url('./img/billboard.jpg');
    }

    @media only screen and (min-device-width: 400px) {
        .header-image {
            background-image: url(./img/billboard.jpg);
        }
    }

</style>

Answer 2

我认为您错误地引用了.css文件。不应该是链接

rel="stylesheet" href="style.css"

希望它能起作用

Answer 3

假设您的文件夹结构如下：

|-root/
|--css/
|   |--style.css
|--img/
|   |--billboard.jpg
|--index.html

而您正在从style.css调用图像，则CSS看起来像这样

.header-image {
  background-image: url('../img/billboard.jpg');
}

如果您从index.html进行呼叫，则CSS看起来像这样：

.header-image { background-image: url('img/billboard.jpg'); }

您将需要height和width才能显示图像。

Answer 4

首先将图片放在html文件后面，然后尝试

on charger

如果工作正常，并且您看到图像，则将图像复制到文件夹中，然后使用./或主地址。

在w3schools网站中

背景图片中的网址使用“ not”。

Answer 5

请把所有外部资源放在head标签中。

<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
</head>

此外，您不应在img属性中将宽度或高度设置为像素。相反，请在下面尝试这种方式

<img src="img/icon.png" height="48" width="98">

还要注意的一件事是，如果要使用内部CSS，则应在head标签中编写规则。

<head>
    <style>
    ...
    </style>
</head>

图片未显示在页面上

5 个答案: