Question

I am looking to create a header with a logo link that changes color upon hover. For this reason I want to use the "background-image" property instead of simply using an img tag in the HTML. I am trying to enter my logo in the background image URL inside of div.logo but for some reason it is not appearing. I have tried entering the path in multiple different ways. Most recently, I uploaded the picture online and tried using the hosting URL (seen in code below) but not even this is working. Can anyone help me out?

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

Add this 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');
}

带简写的代码段：（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 background-image will not show up

2 个答案:

问题

你需要做什么？

代码段单独的属性：

带简写的代码段：（W3C reference）