Open
Bug 1191043
Opened 9 years ago
Updated 1 year ago
Support for Filter CSS <image> values
Categories
(Core :: CSS Parsing and Computation, defect)
Core
CSS Parsing and Computation
Tracking
()
UNCONFIRMED
People
(Reporter: m_khvoinitsky, Unassigned)
References
()
Details
(Keywords: dev-doc-needed)
User Agent: Mozilla/5.0 (X11; Linux x86_64; rv:39.0) Gecko/20100101 Firefox/39.0
Build ID: 20150702232110
Steps to reproduce:
The draft specification is described here:
https://drafts.fxtf.org/filters/#FilterCSSImageValue
If implemented, you can do like this:
background-image: filter(url("..."), hue-rotate(180deg))
Comment hidden (obsolete) |
Comment 2•9 years ago
|
||
(In reply to Robert Longson from comment #1)
> This is already implemented and has been for some time. What makes you think
> it is not?
(Are you sure? Note that this is about a filter() function, not the CSS "filter" property. I don't see the string "filter(" in any of our reftests, nor any "background*filter" usages aside from separate usages of the "background" property & the "filter" property.)
Reporter | ||
Comment 3•9 years ago
|
||
(In reply to Daniel Holbert [:dholbert] (out 8/5-8/10) from comment #2)
> (In reply to Robert Longson from comment #1)
> > This is already implemented and has been for some time. What makes you think
> > it is not?
>
> (Are you sure? Note that this is about a filter() function, not the CSS
> "filter" property. I don't see the string "filter(" in any of our reftests,
> nor any "background*filter" usages aside from separate usages of the
> "background" property & the "filter" property.)
Right.
Here is a demo: https://jsfiddle.net/ryejmp9p/2/
Updated•9 years ago
|
Updated•9 years ago
|
Keywords: dev-doc-needed
Comment hidden (advocacy) |
Updated•2 years ago
|
Severity: normal → S3
This is a feature that can simplify things in the case when we need to apply an effect to the background
, but we don't want the text content to be affected as well.
For example, we might want a grainy gradient card. We can get that with an SVG filter
, but if we don't want our element's text content to be affected , then we need to move both the background
and the filter
declarations on an absolutely positioned element (live demo):
div { /* just the relevant CSS */
position: relative
}
div::before {
position: absolute;
inset: 0;
z-index: -1;
background: radial-gradient(circle, red, tan);
filter: url(#grainy);
content: '';
}
With filter()
, all the code above would be reduced to just one declaration:
div { /* just the relevant CSS */
background: filter(radial-gradient(circle, red, tan), url(#grainy))
}
You need to log in
before you can comment on or make changes to this bug.
Description
•