20

用了很久的内容属性，今天想尝试一下新的东西。而不是使用 JS 来显示图像工具提示，我想知道是否可以使用 CSS 动态地做到这一点。

所以我尝试了：

.TableLine:hover:after{
  content: url("../Img/Photo/"attr(id)".jpg"); 
}

whereattr(id)应该返回图片的 ID（字母数字），这也是图片的名称。

它根本不起作用，它没有任何作用。我认为该块没有解析，因为向该块添加边框或背景似乎也没有效果。

当我只使用attr(id)单独的，没有 url 的东西时，它可以完美地工作。当我替换attr(id)为图片的真实姓名时，它也有效。

在网上搜索了一段时间后，我没有找到任何相关的东西，所以我在这里。这是一个已知的错误还是只是我的错误？:)

4

2 回答 2

19

这既不是错误也不是错误。当前支持的内容语法 (CSS2.1) 是：

content: normal | none | 
         [ <string> | <uri> | <counter> | attr() |
           open-quote | close-quote | no-open-quote | no-close-quote ]+ | inherit

IE：

  • 字面量normal，none或inherit

  • 或任何数量的连续：

    • 一个字符串 -"hello"
    • 一个（常量）URI -url("image.jpg")
    • 一个柜台——counter(section)
    • 一个属性——attr(id)
    • open-quote, close-quote, no-open-quote,no-close-quote

规范不允许它们“嵌套”，它们只能相互跟随，例如：

content: "Photo: " url("../Img/Photo.jpg") attr(id);
/* Which is not what you want */

当前的 CSS3 草案也不允许这样做。可能 - 如果已经讨论过 - 因为大多数用例与演示无关，更多与实际内容有关。

于 2012-02-11T22:46:08.053 回答
14

从 2012 年 8 月 28 日的 W3C Candidate Recommendation 开始，有用于指定 attr() 返回的类型的语法。

此处对其进行了描述。

长话短说，以下将起作用：

content: attr(id url);

但是您似乎仍然无法将其与其他字符串连接起来，这很烦人。

无论如何，这似乎仍然没有在任何地方实施。

检查浏览器兼容性

于 2013-02-22T05:03:01.573 回答