HTML / CSS / jQuery: Background Image Opacity

Question

Say I have a div, and the div should have a background image: url (foobar.png). Also, however, opobar.png 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 reference? Something like that?

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 opacity:

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

Edit:

, opacity , . , :

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

CSS :

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

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

Answer 2

, : foobar.png 60% 24- PNG. IE6 png fix, .

- - , - , - , .

, - , .

edit: , , , , , . , , -.

Answer 3

. HTML.. .

.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 4

css:

opacity:0.4

Answer 5

, , .

, - , - :

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

This example assumes that you usually view the white background of the page; you may want to change the color of the translucent image if you are trying to simulate translucency with some other color, partially skipping through.

Answer 6

 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">