Is content:url attribute being supported by Firefox?
I am using CSS content:url attribute to replace a specific image through media queries. With Chrome, Safari, and Opera the CSS attribute works and the image is replaced.
I've done some research on the issue. Results suggested that adding :after to my selector would address the issue. Unfortunately, it did not--the image is not being replaced.
Here is the code:
#hero-image-mobile { content:url(".../fpo-prod-05.jpg") !important; }
Is CSS content:url just not supported?
Thanks in advance, Ed.
由cor-el于修改
所有回复 (6)
https://developer.mozilla.org/docs/Web/CSS/content
embNJ86 wrote:
#hero-image-mobile { content:url(".../fpo-prod-05.jpg") !important; }
That should be either #hero-image-mobile::before or #hero-image-mobile::after (or :before or :after).
Check the Web Console for any relevant errors and run your site through the validators. If you don't spot anything wrong, post the link to the page in question.
Hello,
I've double checked the error console--no errors, used both :before and :after, and used jigsaw to validate the CSS--passed no errors found. Unfortunately, I am still getting the same result: image fpo-prod-05 is not replacing the other image (spacer gif). I've attached two screen shots to illustrate what i am trying to do.
Thanks again in advance, Ed.
Does Firefox tries to load images?
Does Firefox use the correct URL to retrieve the images?
You can try to check the HTTP request/response headers with the Live Http Headers extension.
Can you post a link to a publicly accessible page (i.e. no authentication or signing on required) that shows this issue?
here is a link to a the code I am working on: http://beltran-edgardo.name/prdj/test/test/
attempting to do all with just css and html.
I think that content isn't working for images. It only works for text nodes like a and p and div and span. I don't know if there have been any changes that you can use it with images. See e.g. this old discussion.
It looks to be an issue only on Firefox. I am able to get the image to render how I have it set in my CSS.