Question

我有一个显示图像的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;
}

Answer 1

摆脱x和y坐标偏移。它把它推出了div。

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

Answer 2

使用0 0作为背景位置：
的jsfiddle：here

Answer 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;
}

背景图片没有出现在CSS中，但在img标签中有效

3 个答案: