CSS background-image-opacity?

by

You can do the faded background with CSS Generated Content

Demo at http://jsfiddle.net/gaby/WktFm/508/

Html 

<div class="container">
        contents
</div>

Css

.container{
    position: relative;
    z-index:1;
    overflow:hidden; /*if you want to crop the image*/
}
.container:before{
    z-index:-1;
    position:absolute;
    left:0;
    top:0;
    content: url('path/to/image.ext');
    opacity:0.4;
}

But you cannot modify the opacity as we are not allowed to modify generated content..

You could manipulate it with classes and css events though (but not sure if it fits your needs)

for example

.container:hover:before{
    opacity:1;
}

UPDATE

You can use css transitions to animate the opacity (again through classes)

demo at http://jsfiddle.net/gaby/WktFm/507/

Adding 

-webkit-transition: opacity 1s linear;
-o-transition: opacity 1s linear;
-moz-transition: opacity 1s linear;
transition: opacity 1s linear;

to the .container:before rule will make the opacity animate to 1 in one second.

Compatibility

  • FF 5 (maybe 4 also, but do not have it installed.)
  • IE 9 Fails..
  • Webkit based browsers fail (Chrome supports it now v26 – maybe earlier versions too, but just checked with my current build), but they are aware and working on it ( https://bugs.webkit.org/show_bug.cgi?id=23209 )

.. so only the latest FF supports it for the moment.. but a nice idea, no ? 🙂

More Related Contents:

  1. change the menu font size
  2. Can I debug by CSS code in easy way for beginner?
  3. Setting columns in bootstrap grid
  4. How to write a:hover in inline CSS?
  5. Landscape printing from HTML
  6. Change color of PNG image via CSS?
  7. Use images instead of radio buttons
  8. Is it possible to have two background colors for a single html element? [duplicate]
  9. How can I make my flexbox layout take 100% vertical space?
  10. How is Github Changing Pages and the URL so smoothly without AJAX?
  11. Font Awesome icon inside text input element
  12. Custom bullet symbol for elements in that is a regular character, and not an image
  13. How do I add a “search” button in a text input field?
  14. heading with horizontal line on either side [duplicate]
  15. CSS Background image not loading
  16. Change checkbox check image to custom image
  17. add title attribute from css
  18. How to add background image for input type=”button”?
  19. How to specify parameters to google chrome adobe pdf viewer?
  20. Flexbox, z-index & position: static: Why isn’t it working?
  21. How to rotate and postion an element on the top left or top right corner?
  22. How to completely remove borders from HTML table
  23. Bootstrap full-width text-input within inline-form
  24. header/footer/nav tags – what happens to these in IE7, IE8 and browsers than don’t support HTML5?
  25. Can you style html form buttons with css?
  26. Internet Explorer and clip-path
  27. Pseudo class :hover does not work in IE7
  28. Media queries not working inside an iframe
  29. bootstrap 4: center inline form inside a jumbotron
  30. How do I style radio buttons with images – laughing smiley for good, sad smiley for bad?

Leave a Comment