CSS 背景圖像不會顯示

Question

我希望創建一個帶有徽標鏈接的標題，該鏈接在懸停時會改變顏色。 出於這個原因，我想使用“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 參考
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 參考）

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

可以在此處找到實時 jsFiddle 示例

我希望這可以幫助您了解出了什么問題。 如果您有任何其他問題，請隨時提出。

CSS 背景圖像不會顯示

問題描述

2 個解決方案

解決方案1
1 2017-10-12 10:03:51

解決方案2
1 已采納 2017-10-12 12:03:12

問題

你需要做什么？

代碼片段單獨的屬性：

帶速記的代碼片段：（ W3C 參考）

CSS 背景圖像不會顯示

問題描述

2 個解決方案

解決方案1 1 2017-10-12 10:03:51

解決方案2 1 已采納 2017-10-12 12:03:12

問題

你需要做什么？

代碼片段單獨的屬性：

帶速記的代碼片段：（ W3C 參考）

解決方案1
1 2017-10-12 10:03:51

解決方案2
1 已采納 2017-10-12 12:03:12