Question

此网址包含要在按钮

上显示的图像

http://s28.postimg.org/7zvdncg71/buttonbg.png

CSS

.button1{
            background-image: url(http://s28.postimg.org/7zvdncg71/buttonbg.png);           
            position: absolute; 
            height: 50px; 
            width: 210px;
            top: 60px;
            left: 500px;
        }

HTML

<button class="button1" type="button" >

当你打开链接时它是不同的，而在按钮上图像是不同的。请帮我看看如何在按钮上查看原始图像。

Answer 1

添加更多样式：

.button1 {
    background-image: url(http://s28.postimg.org/7zvdncg71/buttonbg.png);
    background-color: #3CB1DE;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    position: absolute;
    height: 50px;
    width: 210px;
    top: 60px;
    left: 500px;
}

小提琴：http://jsfiddle.net/z21pheqr/

Answer 2

首先，您需要在网址

中引用

background-image: url('http://s28.postimg.org/7zvdncg71/buttonbg.png');

第二，您的图像比按钮大。尝试

background-size:cover;
background-repeat:no-repeat;

和 height: 85px;

jsfiddle

Answer 3

试试这个css：

.button1{
        background-image: url(http://s28.postimg.org/7zvdncg71/buttonbg.png);   
        position: absolute;
        background-size:cover;
        height: 84px; 
        width: 210px;
        top: 60px;
        left: 500px;
    }

我无法在按钮上查看原始图像

3 个答案: