Question

如何替换此标记：

<img src="images/username_t.png" />

使用CSS？

如何使用CSS样式显示图像？

Answer 1

<强> HTML

<div id="pic"></div>

<强> CSS：

#pic {
    background-image: url('images/username_t.png');
    width: 100px; /* image width */
    height: 100px; /* image height */
    display: inline-block; /* so that it behaves like the img element */
}

对于css，有一些处理背景图像的选项，所以也要检查这些：

background-attachment
  background-image
  background-position
  background-repeat
  background-clip
  背景源   背景尺寸

Answer 2

请查看此示例：jsFiddle.net

background-image是实现这一目标的好方法。现在你已经获得了从未使用过IMG标签的能力。例如，您可以非常轻松地repeat，position，clip和resize。

<div id="image"></div>

/*css*/
#image {
    background-image: url(images/username_t.png);
    width: 200px;
    height: 900px;
}

现在假设您希望用户定位IMG。您可以使用这些属性和一点jQuery

来执行此类操作

var originX, originY;
$('#image').mousedown(function (event) {
    originX = event.pageX;
    originY = event.pageY;
});
$('#image').mousemove(function(event) {
    var top = Math.abs(originX - event.pageX);
    var left = Math.abs(originY - event.pageY);
    $('#image').css('background-position', top + 'px ' + left + 'px');    
});

Answer 3

您可以使用以下内容;但是，如果它是背景，你真的应该只使用它，因为它会影响可访问性。不应该通过CSS控制图像，因为图像的来源实际上不是“样式类型”属性。图像的来源属于标记，除非它是一个背景，显然是一种“造型类型”的东西，因为它会对页面进行样式化。

CSS：

<style type="text/css">
    #my_div {
        background: url('images/username_t.png');
        height: ?????px;
        width: ????px;
    }
</style>

HTML：

<div id="my_div"></div>

随意查看background CSS property。

Answer 4

我认为没有项目表现得像＆lt; img＆gt;标签。如果你真的想这样做，你可以定义具有某种背景图像附件的css类。但是你总是需要提供最小宽度和最小高度才能看到图像。

Answer 5

我不确定我是否正确理解了这个问题，但是如果您只想显示一个您认为不属于内容的图像，则可以使用带有背景图像的任何元素。

例如，

HTML：

<div id="thing"></div>

CSS：

#thing {
    background: url('images/username_t.png');
    width: 100px;
    height: 100px;
}

当然，如果您觉得图像是内容的一部分，则应使用图像。如果你想要的东西就像用户交互一样（可拖动到桌面等），你可能想要一个图像。

替换img标签

5 个答案:

CSS：

HTML：