制作一个带背景的按钮

Question

我想制作一个带有标志作为背景的html按钮。因此，在文件夹图像中有一张名为langnl.jpg的图片。我的代码：

Html：

<button id="taal" onclick="changelangde()" >DE</button>

的CSS：

#taal{
background-image:images/langde.jpg; 
}

但它不起作用，按钮只保留默认颜色。我已经尝试了几个选项来链接图像，但没有人工作。如果我只是用img-tag插入图像，那就可以了。

Answer 1

试

#taal{
 background: url('images/langde.jpg') no-repeat top left;
 width:200px;
 height:100px;
 }

Answer 2

将images/langde.jpg;更改为url(images/langde.jpg);

#taal{
background-image:url('images/langde.jpg'); 
background-size:cover;
}

https://developer.mozilla.org/en-US/docs/Web/CSS/background-image

Answer 3

你可以这样做：

#taal{
    background: url('images/langde.jpg') no-repeat top left;
    background-size:contain;
}

或者这个：

#taal{
    background: url('images/langde.jpg') no-repeat top left;
    background-size:100% 100%;
}

取决于您的需求，您可以看到示例here。