無法將背景圖像添加到CSS按鈕

剛開始使用樣式按鈕時，我的願望是在按鈕左側有一個背景，而文本搜索位於圖像的右側。這是我迄今爲止的代碼。 And here is how the button is so far 無法將背景圖像添加到CSS按鈕

如何在文本左側添加小圖標？我試着運行這段代碼，但沒有運氣。

background: no-repeat url("http://www.veryicon.com/icon/ico/System/Small%20%26%20Flat/beer.ico") 0 0;

.button { 
 
    -moz-box-shadow:inset 0px 0px 0px 0px #ffffff; 
 
    -webkit-box-shadow:inset 0px 0px 0px 0px #ffffff; 
 
    box-shadow:inset 0px 0px 0px 0px #ffffff; 
 
    background:-webkit-linear-gradient(top, #f9f9f9 5%, #e9e9e9 100%); 
 
    background:-moz-linear-gradient(top, #f9f9f9 5%, #e9e9e9 100%); 
 
    background:-ms-linear-gradient(top, #f9f9f9 5%, #e9e9e9 100%); 
 
    background:-o-linear-gradient(top, #f9f9f9 5%, #e9e9e9 100%); 
 
    background:linear-gradient(to bottom, #f9f9f9 5%, #e9e9e9 100%); 
 
    background-color:#f9f9f9; 
 
    -webkit-border-top-left-radius:0px; 
 
    -moz-border-radius-topleft:0px; 
 
    border-top-left-radius:0px; 
 
    -webkit-border-top-right-radius:0px; 
 
    -moz-border-radius-topright:0px; 
 
    border-top-right-radius:0px; 
 
    -webkit-border-bottom-right-radius:0px; 
 
    -moz-border-radius-bottomright:0px; 
 
    border-bottom-right-radius:0px; 
 
    -webkit-border-bottom-left-radius:0px; 
 
    -moz-border-radius-bottomleft:0px; 
 
    border-bottom-left-radius:0px; 
 
    text-indent:76px; 
 
    border:1px solid #dcdcdc; 
 
    display:inline-block; 
 
    color:#666666; 
 
    font-family:Arial; 
 
    font-size:15px; 
 
    font-weight:bold; 
 
    font-style:normal; 
 
    height:66px; 
 
    line-height:66px; 
 
    width:152px; 
 
    text-decoration:none; 
 
    text-align:center; 
 
    text-shadow:1px 1px 0px #ffffff; 
 
} 
 
.button:hover { 
 
    background:-webkit-linear-gradient(top, #e9e9e9 5%, #f9f9f9 100%); 
 
    background:-moz-linear-gradient(top, #e9e9e9 5%, #f9f9f9 100%); 
 
    background:-ms-linear-gradient(top, #e9e9e9 5%, #f9f9f9 100%); 
 
    background:-o-linear-gradient(top, #e9e9e9 5%, #f9f9f9 100%); 
 
    background:linear-gradient(to bottom, #e9e9e9 5%, #f9f9f9 100%); 
 
    background-color:#e9e9e9; 
 
} 
 
.button:active { 
 
    position:relative; 
 
    top:1px; 
 
}

<div class="button">Search!</div>

來源

2016-04-25 Jonathan

我不明白這與Java編程有什麼關係。你能說Javascript嗎？如果是這樣，請更改您的問題標籤，因爲您可能會吸引錯誤的專家來解決您的問題。 –

道歉，沒看見我加了java大聲笑 – Jonathan

ico？據我所知，你不能添加一個ico，瀏覽器不支持這種格式。如果你只是想添加一個圖標，你可以使用引導程序的圖標，簡單而有效。 – wolfrevo

將您確切的代碼示例代碼輸出的作品，所以有什麼您將該行納入您的css定義的方式有誤。

不幸的是，你的示例代碼不包括實際的行，但我的猜測是你可能已經把它放在線性漸變背景定義之上，然後它會覆蓋你的圖像。要測試這是否是錯誤，請將它放在.button聲明的底部並查看它是否正在顯示。

要使用多背景圖片，您可以用逗號單獨的個人價值，就像這樣：

background-image: url('one.png'), url('two.jpg'); 
background-position: center center, left top;

來源

2016-04-25 19:50:09 TheThirdMan

謝謝。非常清楚！ – Jonathan

@Jonathan：很高興能幫到你！另外，如果這個或任何答案已經解決了您的問題，請考慮通過點擊複選標記來接受它。這向更廣泛的社區表明，您已找到解決方案，併爲答覆者和您自己提供一些聲譽 - 雖然沒有義務這樣做 – TheThirdMan

儘量給背景-size屬性這樣

.button { 
 
    -moz-box-shadow: inset 0px 0px 0px 0px #ffffff; 
 
    -webkit-box-shadow: inset 0px 0px 0px 0px #ffffff; 
 
    box-shadow: inset 0px 0px 0px 0px #ffffff; 
 
    background: -webkit-linear-gradient(top, #f9f9f9 5%, #e9e9e9 100%); 
 
    background: -moz-linear-gradient(top, #f9f9f9 5%, #e9e9e9 100%); 
 
    background: -ms-linear-gradient(top, #f9f9f9 5%, #e9e9e9 100%); 
 
    background: -o-linear-gradient(top, #f9f9f9 5%, #e9e9e9 100%); 
 
    background: linear-gradient(to bottom, #f9f9f9 5%, #e9e9e9 100%); 
 
    background-color: #f9f9f9; 
 
    -webkit-border-top-left-radius: 0px; 
 
    -moz-border-radius-topleft: 0px; 
 
    border-top-left-radius: 0px; 
 
    -webkit-border-top-right-radius: 0px; 
 
    -moz-border-radius-topright: 0px; 
 
    border-top-right-radius: 0px; 
 
    -webkit-border-bottom-right-radius: 0px; 
 
    -moz-border-radius-bottomright: 0px; 
 
    border-bottom-right-radius: 0px; 
 
    -webkit-border-bottom-left-radius: 0px; 
 
    -moz-border-radius-bottomleft: 0px; 
 
    border-bottom-left-radius: 0px; 
 
    text-indent: 76px; 
 
    border: 1px solid #dcdcdc; 
 
    display: inline-block; 
 
    color: #666666; 
 
    font-family: Arial; 
 
    font-size: 15px; 
 
    font-weight: bold; 
 
    font-style: normal; 
 
    height: 66px; 
 
    line-height: 66px; 
 
    width: 152px; 
 
    text-decoration: none; 
 
    text-align: center; 
 
    text-shadow: 1px 1px 0px #ffffff; 
 
    background: no-repeat url("http://www.veryicon.com/icon/ico/System/Small%20%26%20Flat/beer.ico") 0 0; 
 
    background-size: contain; 
 
}

<html> 
 

 
<body> 
 
    <div class="button">Search!</div> 
 
</body> 
 

 
</html>

來源

2016-04-25 19:37:01

我嘗試了你的建議，但我沒有運氣 – Jonathan

我試過了，它適用於我，我用我的完整代碼編輯了答案。 –

編輯*對不起，我輸入它不正確，只是意識到比較兩個代碼，我的錯誤是。非常感謝你！ – Jonathan

嘗試後背景線性漸變添加背景圖片

來源

2016-04-25 19:51:54

要多背景爲一個元素添加，你需要聲明他們都在一個逗號分隔的列表，像這樣：

.button { 
    background: no-repeat url("http://www.veryicon.com/icon/ico/System/Small%20%26%20Flat/beer.ico") 0 0, linear-gradient(to bottom, #f9f9f9 5%, #e9e9e9 100%); 
}

背景是從去年到第一，那麼你的圖標應該出現強制畫很好。

如果多次聲明一個屬性，瀏覽器將真正覆蓋之前的值，除非新值無效。另外，請記住，漸變被視爲「圖像」。

來源

2016-04-25 19:52:59 odnamrataizem

非常感謝您的幫助！ – Jonathan

無法將背景圖像添加到CSS按鈕

回答

相關問題