CSS 背景图像不透明度？

Question

Related to How do I give text or an image a transparent background using CSS? , but slightly different.

I'd like to know if it's possible to change the alpha value of a background image , rather than just the colour. Obviously I can just save the image with different alpha values, but I'd like to be able to adjust the alpha dynamically.

So far the best I've got is:

<div style="position: relative;">
    <div style="position: absolute; left: 0px; right: 0px; top: 0px; bottom: 0px;
                      background-image: url(...); opacity: 0.5;"></div>
    <div style="position: relative; z-index: 1;">
        <!-- Rest of content here -->
    </div>
</div>

It works, but it's bulky and ugly, and messes things up in more complicated layouts.

Answer 1

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 ? :)

Answer 2

.class {
    /* Fallback for web browsers that doesn't support RGBa */
    background: rgb(0, 0, 0);
    /* RGBa with 0.6 opacity */
    background: rgba(0, 0, 0, 0.6);
}

Copied from: http://robertnyman.com/2010/01/11/css-background-transparency-without-affecting-child-elements-through-rgba-and-filters/

Answer 3

If the background doesn't have to repeat, you can use the sprite technique (sliding-doors) where you put all the images with differing opacity into one (next to each other) and then just shift them around with background-position .

Or you could declare the same partially transparent background image more than once, if your target browser supports multiple backgrounds (Firefox 3.6+, Safari 1.0+, Chrome 1.3+, Opera 10.5+, Internet Explorer 9+). The opacity of those multiple images should add up, the more backgrounds you define.

This process of combining transparencies is called Alpha Blending and calculated as (thanks @IainFraser):

αᵣ = α₁ + α₂(1-α₁) where α ranges between 0 and 1.

Answer 4

Try this trick .. use css shadow with (inset) option and make the deep 200px for example

Code:

box-shadow: inset 0px 0px 277px 3px #4c3f37;

.

Also for all browsers:

-moz-box-shadow: inset 0px 0px 47px 3px #4c3f37;
-webkit-box-shadow: inset 0px 0px 47px 3px #4c3f37;
box-shadow: inset 0px 0px 277px 3px #4c3f37;

and increase number to make fill your box :)

Enjoy!

Answer 5

You can put a second element inside the element you wish to have a transparent background on.

<div class="container">
    <div class="container-background"></div>
    <div class="content">
         Yay, happy content!
    </div>
</div>

Then make the '.container-background' positioned absolutely to cover the parent element. At this point you'll be able to adjust the opacity of it without affecting the opacity of the content inside '.container'.

.container {
    position: relative;
}
.container .container-background {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: url(background.png);
    opacity: 0.5;
}
.container .content {
    position: relative;
    z-index: 1;
}

Answer 6

试试这个

<div style="background: linear-gradient( rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7) ), url(/image.png);background-repeat: no-repeat;  background-position: center;"> </div>

Answer 7

To set the opacity of a background image, you just need to add an opaque image as first image in the background-image set.

Explanation:

• The gradient function is creating an image from a color
• The rgba function is creating a color that accepts opacity as parameter (ie alpha parameters)
• alpha = 1 - opacity of white
• Therefore by combining them, you can create an opaque image.

For instance, you can add an opacity of 0.3 by adding the following image linear-gradient(to right, rgba(255,255,255, 0.7) 0 100%) in the set of background-image

Example for an opacity of 0.3

 body{ background-image: linear-gradient(to right, rgba(255,255,255, 0.7) 0 100%), url(https://images.unsplash.com/photo-1497294815431-9365093b7331?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1950&q=80); background-size: cover; }

Enjoy !

Credits

Answer 8

#id {
  position: relative;
  opacity: 0.99;
}

#id::before {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  z-index: -1;
  background: url('image.png');
  opacity: 0.3;
}

Hack with opacity 0.99 (less than 1) creates z-index context so you can not worry about global z-index values. (Try to remove it and see what happens in the next demo where parent wrapper has positive z-index.)
If your element already has z-index, then you don't need this hack.

Demo .

Answer 9

Here is another approach to setup gradient and stransparency with CSS. You need to play arround with the parameters a bit though.

background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(0, 0, 0, 0)), color-stop(100%, transparent)),url("gears.jpg"); /* Chrome,Safari4+ */
background-image: -webkit-linear-gradient(top, transparent, transparent),url("gears.jpg"); /* Chrome10+,Safari5.1+ */
background-image:    -moz-linear-gradient(top, transparent, transparent),url("gears.jpg"); /* FF3.6+ */
background-image:     -ms-linear-gradient(top, transparent, transparent),url("gears.jpg"); /* IE10+ */
background-image:      -o-linear-gradient(top, transparent, transparent),url("gears.jpg"); /* Opera 11.10+ */
background-image:         linear-gradient(to bottom, transparent, transparent),url("gears.jpg"); /* W3C */

Answer 10

I use it, I tested it on a white background, but it can be matched to the background color, especially if using css var :

background: #ececec99;
background-blend-mode: lighten;
background-image: url(images/background-1.jpg);
background-repeat: no-repeat;
background-size: cover;
background-position: center;

It's important to note that I only checked this in the Chrome browser.

Answer 11

You can't edit the image via CSS. The only solution I can think of is to edit the image and change its opacity, or make different images with all the opacities needed.

Answer 12

You can use a hack to achieve a filter effect. some users mentioned before but none of their answers worked for me except this solution

#item_with_background {
    background: rgb(filter_color) url(...)
}

#item_with_background > * {
    position: relative;
    z-index: 1; // this may cause other problems if you have other elements with higher than 1 z-index. so use with caution.
}

#item_with_background::before {
    content: ' ';
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background: rgba(filter_color, 0.9);
    width: 100%;
    height: 100%;
    z-index: 0;
}

Here is a working example

Answer 13

body {
  ' css code that goes in your body'
}

body::after {
  background: url(yourfilename.jpg);
  content: "";
  opacity: 0.6;
  position: fixed;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  z-index: -1;   
  width:auto;
  height: 100%;
  }

So to say its the body::after you are looking for. This way the code for your body is not changed or altered only the background where you can make changes where necessary.