CSS 背景图像不会显示

Question

我想创建一个带有徽标 link 的页眉，该徽标会在悬停时改变颜色。出于这个原因，我想使用 "background-image" 属性而不是简单地在 HTML 中使用 img 标签。我试图在 div.logo 内的背景图像 URL 中输入我的徽标，但由于某种原因它没有出现。我尝试以多种不同的方式输入路径。最近，我将图片上传到网上并尝试使用托管 URL（见下面的代码），但即使这样也不起作用。谁能帮帮我？

HTML

  <body>
    <header>
      <div class="logo"></div>
      <nav>
        <a href="#" title="User"><%= image_tag("new-user-icon.png", class: "user-icon") %></a>
        <a href="#" title="About"><%= image_tag("about-icon.png", class: "about-icon") %></a>
        <a href="#" title="Contact"><%= image_tag("contact-icon.png", class: "contact-icon") %></a>
        <a href="#" title="Main Menu" id="dropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
        <div class="dropdown" >
          <%=image_tag("new-menu-icon.png", class: "menu-icon") %>
        </a>
          <div class="dropdown-menu dropdown-menu-right" aria-labelledby="dropdownMenuLink">
            <a class="dropdown-item" href="#">Assets</a>
            <a class="dropdown-item" href="#">Debts</a>
            <a class="dropdown-item" href="#">Incomes</a>
            <a class="dropdown-item" href="#">Expenses</a>
            <a class="dropdown-item" href="#">Transfers</a>
            <div class="dropdown-divider"></div>
            <a class="dropdown-item" href="#">Account</a>
            <a class="dropdown-item" href="#">Log Out</a>
          </div>
        </div>
      </nav>
    </header>
    ...
  </body>

CSS (Sass)

header{
  display:inline-block;
  background: rgb(125,185,232);
  background: -moz-linear-gradient(left,  rgba(125,185,232,1) 0%, 
  rgba(32,124,202,1) 0%, rgba(32,124,202,1) 0%, rgba(98,189,234,1) 0%, 
  rgba(129,202,237,1) 50%, rgba(98,189,234,1) 100%);
  background: -webkit-linear-gradient(left,  rgba(125,185,232,1) 0%,rgba(32,124,202,1) 0%,rgba(32,124,202,1) 0%,rgba(98,189,234,1) 0%,rgba(129,202,237,1) 50%,rgba(98,189,234,1) 100%);
  background: linear-gradient(to right,  rgba(125,185,232,1) 0%,rgba(32,124,202,1) 0%,rgba(32,124,202,1) 0%,rgba(98,189,234,1) 0%,rgba(129,202,237,1) 50%,rgba(98,189,234,1) 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( 
  startColorstr='#7db9e8', endColorstr='#62bdea',GradientType=1 );
  border-bottom: 1px solid $universal-background;
  height: 55px;
  width: 100%;
  float: right;
  margin-bottom: 0;
  padding: 0;
  div.logo{
    float: left;
    height: 55px;
    width: 100px;
    background-color: transparent;
    background-image: url('https://image.ibb.co/nw64yw/logo_white.png');
  }
}

Answer 1

添加这个CSS

div.logo {
    float: left;
    height: 55px;
    width: 140px;
    background-color: transparent;
    background-image: url(https://image.ibb.co/nw64yw/logo_white.png);
    background-size: 100%;
    background-repeat: no-repeat;
    background-position: 0px 13px;
}

Answer 2

问题

您的基本问题是背景图像忽略了容器的尺寸。由于你的图像文件很大，你看不到它的任何东西，因为它只显示了透明的左上角。此外，还缺少一些样式，您需要应用这些样式才能显示适当的背景图像。

你需要做什么？

background-position: center 这确保背景图像将放置在容器内居中。
background-size: contain 这指定了背景图像的大小。这个属性和 CSS3 一起出现，解决了背景图片的很多问题。您可以添加像素值或 contain / cover。 Contain 将图像缩放到最大尺寸以适合容器。 Cover 将图像缩放到最大尺寸以覆盖整个容器。 W3C reference
background-repeat: no-repeat 我们不会只显示一次图像（显而易见）。

代码片段单独属性：

.logo { 
  background-size: contain;
  background-color: transparent;
  background-repeat: no-repeat;
  background-position: center;
  background-image: url('https://image.ibb.co/nw64yw/logo_white.png');
}

带有 shorthand 的代码片段：(W3C reference)

.logo { 
  background-size: contain;
  background-image: transparent url('path_to_image.png') center no-repeat;
}

Live jsFiddle example can be found here

我希望这可以帮助您了解问题出在哪里。如果您有任何其他问题，请随时提出。

CSS 背景图像不会显示

CSS background-image will not show up

html

css

background

sass

background-image

问题

你需要做什么？

代码片段单独属性：

带有 shorthand 的代码片段：(W3C reference)