背景图像未出现在 CSS 中，但适用于 img 标签答案

【问题标题】：Background image not appearing in CSS, but works in img tag背景图像未出现在 CSS 中，但适用于 img 标签
【发布时间】：2013-08-03 07:54:12
【问题描述】：

我有一个显示图像的 img 标签。这很好。在同一个文件中，我有一个 div，其类具有具有相同 url 和相同文件的背景图像。 img 有效，但 CSS 背景无效。

<img src="../../Content/Themes/Default/images/DeleteIcon.jpg" />

#droptarget
{
    border: 1px solid #959595;
    height: 100px;
    width: 100px;
    content:'Drop here to Delete';
    background: url('../../Content/Themes/Default/images/DeleteIcon.jpg') no-repeat 140px 102px;
}

【问题讨论】：

使用0 0 而不是140px 102px
你的x和y偏移怎么有140px和102px？
您定义的框的高度和宽度小于您的图像高度/宽度（100px 上 100px 与图像 140px 上 102px）。
@KarelG 这不是图像大小而是背景位置属性

标签： html css

【解决方案1】：

使用0 0作为背景位置：
jsFiddle:here

【讨论】：

【解决方案2】：

摆脱你的 x 和 y 坐标偏移。它将它推出div。

 background: url('../../Content/Themes/Default/images/DeleteIcon.jpg') no-repeat;

【讨论】：

【解决方案3】：

您也可以像这样使用background-image 和background-repeat：

#droptarget {
    border: 1px solid #959595;
    height: 100px;
    width: 100px;
    content:'Drop here to Delete';
    background-image: url('../../Content/Themes/Default/images/DeleteIcon.jpg');
    background-repeat: no-repeat;
}

如果你有background-position从其他元素继承，你可以添加：

#droptarget {
    border: 1px solid #959595;
    height: 100px;
    width: 100px;
    content:'Drop here to Delete';
    background-image: url('../../Content/Themes/Default/images/DeleteIcon.jpg');
    background-repeat: no-repeat;
    background-position: 0 0;
}

【讨论】：

background 是所有这些的捷径！
你是对的background重新组合（颜色、图像、重复和位置），但有时元素使用background-position从其他元素继承位置