Css Content,Attr和Url在同一句话中

Question

我已经使用了content属性很长一段时间了,今天我想尝试新的东西.而不是使用JS来显示图像工具提示,我想知道是否可以使用CSS动态地执行它.

所以我尝试过:

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

其中attr(id)应该返回的图片(字母数字)的ID这也是图象的名称.

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

当我只使用attr(id)单独的,没有url的东西,它完美的工作.当我用attr(id)图片的真实名称替换它时,它也有效.

在网上搜索了一段时间后,我没有发现任何相关内容,所以我在这里.这是一个已知的错误还是我的错误？:)

Answer 1

这既不是错误,也不是错误.目前支持的内容语法(CSS2.1)是:

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

即:

• 文字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草案也不允许这样做.可能 - 如果已经讨论过 - 因为大多数用例与演示文稿无关,而与实际内容有关.

Answer 2

自2012年8月28日的W3C候选人建议书开始,有一种语法用于指定attr()返回的类型.

这里描述.

长话短说,以下可行:

content: attr(id url);

但它似乎仍然不能与其他字符串连接,这很烦人.

无论如何,这似乎仍未在任何地方实施.

检查浏览器兼容性