Clarify attr() URL limitations and add image-set() example (#41948)

* Add clarification on `attr()` usage with `<url>` type in CSS

* Update files/en-us/web/css/reference/values/attr/index.md

Co-authored-by: Estelle Weyl <[email protected]>

---------

Co-authored-by: Estelle Weyl <[email protected]>

Author: codersjj

files/en-us/web/css/reference/values/attr/index.md

@@ -124,6 +124,15 @@ span[data-icon] {
 }
 ```
 
+However, this restriction applies only to places that strictly require a `<url>` type.
+Some functions — such as {{CSSxRef("image/image-set","image-set()")}} — can accept a `<string>` value that is later interpreted as a URL, allowing `attr()` to work in those contexts, depending on browser support:
+
+```css
+span[data-icon] {
+  background: image-set(attr(data-icon));
+}
+```
+
 Values that use `attr()` get marked as _`attr()`-tainted_. Using an `attr()`-tainted value as or in a `<url>` makes a declaration become ["invalid at computed value time" or IACVT for short](https://www.bram.us/2024/02/26/css-what-is-iacvt/).
 
 ### Backwards compatibility