在較小的div中將大圖像設置為背景圖像不起作用

Question

我有以下小提琴 。 我試圖將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;
}

演示

附帶說明一下，此圖像太大了，不能作為圖標使用，您可以嘗試使用圖像精靈將所有圖標合並到一個圖像文件中，而僅使用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/