Question

我有以下fiddle。我试图设置div的背景图像如下：

.close-button{
    position: absolute;
    width: 25px;
    height: 25px;
    background-image: url('https://cdn4.iconfinder.com/data/icons/brightmix/128/monotone_close_exit_delete_small.png');
    z-index: 1;
    cursor: pointer;
    background-color: blue;
}

这是div：

<div class="close-button" data-dismiss="modal" aria-hidden="true"></div>

为什么这不起作用？

Answer 1

您需要对图片使用background-size，background-size:25px;或background-size:contain;，因为它比div的尺寸大得多。

.close-button {
    position: absolute;
    width: 25px;
    height: 25px;
    background-image: url('https://cdn4.iconfinder.com/data/icons/brightmix/128/monotone_close_exit_delete_small.png');
    background-size:25px;
    z-index: 1;
    cursor: pointer;
    background-color: blue;
}

<强> Demo

另一方面，这张图片太大而不能成为一个图标，您可以尝试考虑使用图像精灵将所有图标合并到一个图像文件中，然后使用css背景位置来选择它们。

Answer 2

你的形象比你的div大。更改div的宽度和高度，您将看到背景图像。或者您必须使用较小的背景图像。

.close-button 
{
    position: absolute;
    width: 128px;
    height: 128px;
    background-image: url('https://cdn4.iconfinder.com/data/icons/brightmix/128/monotone_close_exit_delete_small.png');
    z-index: 1;
    cursor: pointer;
    background-color: blue;
}

http://jsfiddle.net/2LTYY/4/

将较大的图像设置为较小的div中的背景图像不起作用

2 个答案: