css - 指定一个元素显示为图片

Question

例如我有一个 DTD

DTD:
<!ELEMENT tbl EMPTY>
<!ATTLIST tbl tableWidth CDATA "0">
<!ELEMENT MyImage EMPTY>
<!ATTLIST MyImage source CDATA "sample.png">

Valid XML:
<tbl tableWidth ="100" />
<MyImage source="image.png"/>

现在在元素 tbl 的 CSS 中，我可以将其指定为

tbl {
    display: table;
}

这意味着元素 tbl 应该显示为表格。但是如果我们想将 MyImage 元素显示为图像，我们该怎么做呢？图像应来自 source 属性。由于显示 css 属性没有图像值。

Answer 1

在 CSS 中，图像是 replaced element ,

An element whose content is outside the scope of the CSS formatting model, such as an image, embedded document, or applet.

这意味着 CSS 没有定义替换内容的呈现方式。它完全留给用户代理。这就是为什么没有 display: image 值的原因。

如果只有browsers implemented CSS3's attr() ，你可以通过做这样的事情来作弊(这实际上会导致被替换的伪元素):

MyImage::before {
  content: attr(source url);
}

但是由于到今天为止还没有浏览器仍然实现它，所以您几乎被困住了。 (从技术上讲，假定的方法是为您的 XML 实现自定义用户代理，但我不确定大多数作者是否为此做好了准备。)