HTML/CSS/jQuery: background-image opacity

Question

Let's say I have a div, and that div should have a background-image:url(foobar.png). Also, however, foobar.png's opacity should be set to 40% so that the background image is translucent. How can I do this?

If this is not possible without JavaScript, is there an example script I can refer to? Something like this?

jQuery.fn.fadedBgImg = function(url, opacity) {

    // Create block element that fills `this` element

    // Set z-index of said element to lowest

    // Set opacity of said element to 40%

    // Insert said element into parent
}

Answer 1

Use CSS to set the opacity:

.translucent {
    opacity: 0.4;
    filter: alpha(opacity = 40); /* For IE */
}

Edit:

Yes, opacity sets the opacity for the entire element, not just the content. To work around this, you can have the content overlay the background and wrap them both in a common parent:

<div id="container">
  <div id="background" class="translucent"></div>
  <div id="content"></div>
</div>

And use CSS like this:

#container {
    position: relative;
    width: 200px;
    height: 200px;
}

#background, #content {
    position: absolute;
    top: 0;
    left: 0;
}

Answer 2

Try this .. Little changes in the HTML structure .. and instead of using background image use normal image and set it backwards with low opacity.

 .my_div{width:300px;height:300px;position:relative;} .my_div div.back_image{display:block; position:absolute; width: 100%; height:100%;top:0px ; left:0px;opacity:0.8;z-index:1;} .my_div div.back_image img {width: 100%; height:100%;} .my_div div.front_text{position:absolute; width: 100%; height:100%;top:0px ; left:0px;opacity:1;z-index:99;padding:10px;color:#ffffff;box-sizing: border-box;} 

 <div class="my_div"> <div class="back_image"><img src="https://newevolutiondesigns.com/images/freebies/black-wallpaper-10.jpg"></div> <div class="front_text"> <h2>Testing Title</h2> <p>Lorem Ipsum content testing. This is Prakash Rao </p> </div> </div> 

Answer 3

I find this is the easiest method: In your graphics editor, set the transparency on foobar.png to 60% and save it as a 24 bit png file. If you need to serve this document to IE6 and don't want to use a png fix, this isn't a solution.

Otherwise, opacity in web browsers is such an annoying thing to deal with in terms of cross-browser support, and dealing with child elements becoming transparent is a typical issue as I recall.

Unfortunately I don't have any scripts that solve this handy.

edit: I see you edited, and I can tell you're not as unaware of what you're doing as I originally expected. Don't be offended if my advice seems a little elementary, haha.

Answer 4

While there's no direct support for setting background-image opacity, you can specify multiple background-image values , which are rendered with the first one closest to the viewer.

Thus, if you are for some strange reason unable to simply edit the opacity of the image in an image editor and serve up the modified image, you could try something like:

semitransparent = "images/white50.png"; //a 1x1 pixel image, white at 50% transparency.
myElement.style.backgroundImage = "url('"+semitransparent+"'), url('"+backgroundImage+"')";

This example assumes you're generally rendering over a white page background; you may wish to change the color of the semitransparent image if you're trying to simulate semitransparency with some other color partially bleeding "through."

Answer 5

 In IE, a !DOCTYPE must be added for the :hover selector to work on other elements than the a element.



img { opacity: 0.4; filter: alpha(opacity=40); //forIE* and earlier

img:hover { opacity: 1.0; filter: alpha(opacity=100); //forIE* and earlier

<img src="klematis.jpg" width="150" height="113" alt="klematis">

<img src="klematis2.jpg" width="150" height="113" alt="klematis">

Answer 6

尝试使用css更改不透明度：

opacity:0.4