CSS：不顯示背景圖片

CSS：

.submit{ 
padding-left:10px; 
margin:0; 
border:0; 
outline: 0; 
height:32px; 
padding-right:32px; 
} 
.green-btn { 
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#61A801), to(#8CC400)); 
background: -webkit-linear-gradient(top, #8CC400, #61A801); 
background: -moz-linear-gradient(top, #8CC400, #61A801); 
background: -ms-linear-gradient(top, #8CC400, #61A801); 
background: -o-linear-gradient(top, #8CC400, #61A801); 
color: #fff; 
font-family: verdana; 
font-size: 13px; 
font-weight: normal; 
border-radius:5px; 
} 
.clipboard{ 
background-image: url(http://cdn1.iconfinder.com/data/icons/opensourceicons/32/Scissors.png) no-repeat right center; 
}

HTML：

<input type="submit" value="Copy" class="submit green-btn clipboard">

的jsfiddle：http://jsfiddle.net/77NYA/

來源

2012-03-20 Luis

您不能指定background-image屬性內的位置，重複值。您只能只有指定圖像的網址。你必須將它們分離出來是這樣的：

.clipboard { 
    background-image: url(http://cdn1.iconfinder.com/data/icons/opensourceicons/32/Scissors.png); 
    background-repeat: no-repeat; 
    background-position: right center; 
}

還要注意：有些瀏覽器（我不知道哪些）不允許梯度和背景圖像結合在一起。

下面是一個使用<button>，內帶一個<img>一個替代的解決方案：

<button type="submit" value="Copy" class="submit green-btn"> 
    <img src="http://cdn1.iconfinder.com/data/icons/opensourceicons/32/Scissors.png" alt="[scissors]" /> 
    Copy 
</button>

.submit{ 
padding-left:10px; 
margin:0; 
border:0; 
outline: 0; 
height:32px; 
line-height:32px; 
padding-right:10px; 
} 
.green-btn { 
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#61A801), to(#8CC400)); 
background: -webkit-linear-gradient(top, #8CC400, #61A801); 
background: -moz-linear-gradient(top, #8CC400, #61A801); 
background: -ms-linear-gradient(top, #8CC400, #61A801); 
background: -o-linear-gradient(top, #8CC400, #61A801); 
color: #fff; 
font-family: verdana; 
font-size: 13px; 
font-weight: normal; 
border-radius:5px; 
} 
.green-btn img { 
float: right; 
margin-left: 10px; 
}

而jsFiddle preview。隨意玩邊緣和東西，讓它看起來更多你想要的。

來源

2012-03-20 02:27:27 animuson

我看到了，你知道像剪刀任何字符？謝謝！ – Luis 2012-03-20 02:30:23

'✄'是✄ - 不知道dingbat在字體方面的支持程度如何，這是相當高的數字。你可能只需要添加一個''。 – animuson 2012-03-20 02:32:08

修復background-image屬性後，線性漸變將被背景圖像覆蓋。

最好的方法是創建一個div並在其上使用線性漸變。創建兩個子元素，其中包含文本和其他將包含該圖標作爲背景的元素。讓div的行爲像使用jquery的提交按鈕。

來源

2012-03-20 02:31:59 vivek

你必須使用背景：在你.clipboard類URL（...），而不是背景圖像

來源

2012-03-20 02:32:53

不起作用;那麼圖像會覆蓋漸變 – AFD 2012-03-20 02:33:57

刪除 - 圖像，並使其

.clipboard { background: url(http://cdn1.iconfinder.com/data/icons/opensourceicons/32/Scissors.png) no-repeat right center;

}

因爲' no-repeat'是background-repeat的值，和'right center'是背景位置的值，並且您在背景圖像中使用這些值。

這樣了Syntex的背景：圖像SRC重複值圖像位置

來源

2013-01-26 22:01:32 Dashrath

CSS：不顯示背景圖片

回答

相關問題