使用标题标签时背景图像未显示在css中答案

【问题标题】：Background image not showing up in css while using header tag使用标题标签时背景图像未显示在css中
【发布时间】：2021-07-15 06:27:50
【问题描述】：

我正在实现一个 html、css 代码，但我的背景图像没有显示出来。这是我的标题规格。

.header
{
  height:200px;
  background-color: green;
  border-bottom: 2px solid ;
  background-image: url(https://ibb.co/3W6XD3Z);
}

我哪里错了？

编辑：添加更多代码 sn-p

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <link rel="stylesheet" href="C:\Users\ratho\OneDrive\Desktop\html project\test1.css">
    <meta charset="utf-8">
    <title></title>
  </head>
  <body>
      <div class="header">
      <p class="head">SHE MATTERS</p>
      <div class="header-list">
      <ul >
        <li><a href="#" class="header-link">Join Us</a></li>
        <li><a href="#" class="header-link">Login</a></li>
      </ul>
      </div>
    </div>
      <div class="main">
        </div>
      <footer>
      </footer>
  </body>
</html>

【问题讨论】：

您需要提供更多信息，使用代码 sn-p 会很好
我添加了代码的html部分。请再次查看。
您确定网址返回的是图片吗？？
尝试使用不同的图像 scr

标签： html css styles

【解决方案1】：

以下是你的答案问题在于背景图片网址

  .header
  {
  height:200px;
  background-color: green;
  border-bottom: 2px solid ;
  background-image: url(https://cdn.pixabay.com/photo/2021/04/15/13/11/bridge 
  6181079_960_720.jpg ); 
  }

W3 学校you can learn more

【讨论】：

【解决方案2】：

下面是你的答案

.header {
         background-image:url('https://images.unsplash.com/photo-1593460354583-4224ab273cfe?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=966&q=80')
        }

<html>
   <head>
      <title>
       Test
      </title>
  </head>
  <body class='header'>
  <h1>My Page</h1>
  </body>
</html>

【讨论】：

【解决方案3】：

问题是你的背景图片地址会这样：

.header
    {
      height:200px;
      background-color: green;
      border-bottom: 2px solid ;
      background-image: url(https://i.ibb.co/0Z4Ng7b/Whats-App-Image-2021-04-21-at-09-58-28.jpg);
    }

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <link rel="stylesheet" href="C:\Users\ratho\OneDrive\Desktop\html project\test1.css">
    <meta charset="utf-8">
    <title></title>
  </head>
  <body>
      <div class="header">
      <p class="head">SHE MATTERS</p>
      <div class="header-list">
      <ul >
        <li><a href="#" class="header-link">Join Us</a></li>
        <li><a href="#" class="header-link">Login</a></li>
      </ul>
      </div>
    </div>
      <div class="main">
        </div>
      <footer>
      </footer>
  </body>
</html>

【讨论】：

【解决方案4】：

您正在尝试将 CSS 属性 background-image 设置为网页...使用图像主机的嵌入代码部分，您可以获得图像 src...您的 css 应该是：

.header {
   height:200px;
   background-color: green;
   border-bottom: 2px solid ;
   background-image:url('https://i.ibb.co/rM8PCjr/Whats-App-Image-2021-04-21-at-09-58-28.jpg');
}

【讨论】：