使用HTML属性作为CSS属性值[重复]

时间:2022-10-28 16:01:55

This question already has an answer here:

这个问题在这里已有答案:

The spec says:

规范说:

The attr() function returns the value of an attribute on the element for use as a value in a property. If used on a pseudo-element, it returns the value of the attribute on the pseudo-element's originating element.

attr()函数返回元素上属性的值,以用作属性中的值。如果在伪元素上使用,它将返回伪元素的原始元素上的属性值。

http://www.w3.org/TR/css3-values/#attr

http://www.w3.org/TR/css3-values/#attr

However, this doesn't seem to work. When I use background-image: url(attr(href)); I get string "attr(href)" as attribute value, not the value itself.

但是,这似乎不起作用。当我使用background-image:url(attr(href));我得到字符串“attr(href)”作为属性值,而不是值本身。

http://jsfiddle.net/x2Rpt/1/

http://jsfiddle.net/x2Rpt/1/

Any ideas why this is broken?

有什么想法为什么会被打破?

1 个解决方案

#1


12  

It's not broken; it's just that no browser has implemented the CSS3 version of attr(). Currently, implementations only exist for the one that was introduced in CSS2.1, which is limited to the content property for generated and replaced content.

它没有被打破;只是没有浏览器实现了attr()的CSS3版本。目前,仅针对CSS2.1中引入的实现存在实现,CSS2.1仅限于生成和替换内容的内容属性。

Your syntax seems correct otherwise, until and unless changes are made to the spec.

除非对规范进行更改,否则您的语法似乎是正确的。

#1


12  

It's not broken; it's just that no browser has implemented the CSS3 version of attr(). Currently, implementations only exist for the one that was introduced in CSS2.1, which is limited to the content property for generated and replaced content.

它没有被打破;只是没有浏览器实现了attr()的CSS3版本。目前,仅针对CSS2.1中引入的实现存在实现,CSS2.1仅限于生成和替换内容的内容属性。

Your syntax seems correct otherwise, until and unless changes are made to the spec.

除非对规范进行更改,否则您的语法似乎是正确的。