沒有顯示的背景css圖象

Question

我的HTML頁面上有一個我想要顯示的鏈接。 圖標沒有出現，我不知道為什么。 圖像圖標位於我項目中的子文件夾中，可以找到它（雙重檢查）。 我正在使用括號IDE。

Html文件：

  <div class="delivery"><a href="Delivery-Options.html">£2.99 Delivery >>More info</a></div>

Css文件：

.delivery {
           float:left; width:59%; padding-left:48px;
           background:#ccc; background-image: url(images/delivery.jpg) 8px center;
          }

Answer 1

background-image不接受您正在使用的簡寫。 改為改為background 。

正如@Gezzasa在評論中指出的那樣，使用background速記將覆蓋以前的background-color 。 更新的代碼段顯示了兩者。 請注意，顏色應出現在圖像之后。

 .delivery { float: left; width: 59%; padding-left: 48px; background: url(https://picsum.photos/200/300) #ccc; background-repeat: no-repeat; background-position: 8px center; } 

 <div class="delivery"><a href="Delivery-Options.html">£2.99 Delivery >>More info</a></div> 

Answer 2

您在background-image參數中使用了背景位置。

刪除它並將其放入background-position

例如： background-position: 8px center; background-image: url(images/delivery.jpg); background-position: 8px center; background-image: url(images/delivery.jpg);

Answer 3

這會將左側的圖像顯示為圖標。 您可以更改背景大小。

.delivery {
        width:59%; 
        padding-left:48px;
        background-size: 18px 18px;
        background-image:url(coffee.jpg) ;
        background-repeat: no-repeat;
    }

HTML

<div class="delivery"><a href="Delivery-Options.html">£2.99 Delivery >>More info</a></div>