html - Wie verdunkle ich einen Hintergrund mit CSS?

original title: "html - How to darken a background using CSS?"


Translate

I have an element with text in it. Whenever I decrease the opacity, then I decrease the opacity of the WHOLE body. Is there any way I can just make the background-image darker, and not everything else?

background-image:url('http://fc02.deviantart.net/fs71/i/2011/274/6/f/ocean__sky__stars__and_you_by_muddymelly-d4bg1ub.png');


Ich habe ein Element mit Text darin. Immer wenn ich die Opazität verringere, verringere ich die Opazität des GANZEN Körpers. Kann ich das Hintergrundbild auf irgendeine Weise dunkler machen und nicht alles ...

Dies ist die Zusammenfassung nach der Übersetzung. Wenn Sie die vollständige Übersetzung anzeigen möchten, klicken Sie auf das Symbol "Übersetzen"


Alle Antworten
  • Translate

    Just add this code to your image css

     body{
     background:
            /* top, transparent black, faked with gradient */ 
            linear-gradient(
              rgba(0, 0, 0, 0.7), 
              rgba(0, 0, 0, 0.7)
            ),
            /* bottom, image */
            url(http://fc02.deviantart.net/fs71/i/2011/274/6/f/ocean__sky__stars__and_you_by_muddymelly-d4bg1ub.png);
        }

  • Translate

    Use an :after psuedo-element:

    .overlay {
        position: relative;
        transition: all 1s;
    }
    
    .overlay:after {
        content: '\A';
        position: absolute;
        width: 100%; 
        height:100%;
        top:0; 
        left:0;
        background:rgba(0,0,0,0.5);
        opacity: 1;
        transition: all 0.5s;
        -webkit-transition: all 0.5s;
        -moz-transition: all 0.5s;
    }
    .overlay:hover:after {
        opacity: 0;
    }
    

    Check out my pen >

    http://codepen.io/craigocurtis/pen/KzXYad


  • Translate

    Setting background-blend-mode to darken would be the most direct and shortest way to achieve the purpose however you must set a background-color first for the blend mode to work.
    This is also the best way if you need to manipulate the values in javascript later on.

    background: rgba(0, 0, 0, .65) url('http://fc02.deviantart.net/fs71/i/2011/274/6/f/ocean__sky__stars__and_you_by_muddymelly-d4bg1ub.png');
    background-blend-mode: darken;
    

    Can I use for background-blend


  • Ellis Lee
    Translate

    It might be possible to do this with box-shadow

    however, I can't get it to actually apply to an image. Only on solid color backgrounds

    body {
      background: #131418;
      color: #999;
      text-align: center;
    }
    .mycooldiv {
      width: 400px;
      height: 300px;
      margin: 2% auto;
      border-radius: 100%;
    }
    .red {
      background: red
    }
    .blue {
      background: blue
    }
    .yellow {
      background: yellow
    }
    .green {
      background: green
    }
    #darken {
      box-shadow: inset 0px 0px 400px 110px rgba(0, 0, 0, .7);
      /*darkness level control - change the alpha value for the color for darken/ligheter effect */
    }
    Red
    <div class="mycooldiv red"></div>
    Darkened Red
    <div class="mycooldiv red" id="darken"></div>
    Blue
    <div class="mycooldiv blue"></div>
    Darkened Blue
    <div class="mycooldiv blue" id="darken"></div>
    Yellow
    <div class="mycooldiv yellow"></div>
    Darkened Yellow
    <div class="mycooldiv yellow" id="darken"></div>
    Green
    <div class="mycooldiv green"></div>
    Darkened Green
    <div class="mycooldiv green" id="darken"></div>

  • Translate

    You can use a container for your background, placed as absolute and negative z-index : http://jsfiddle.net/2YW7g/

    HTML

    <div class="main">
        <div class="bg">         
        </div>
        Hello World!!!!
    </div>
    

    CSS

    .main{
        width:400px;
        height:400px;
        position:relative;
        color:red;
        background-color:transparent;
        font-size:18px;
    }
    .main .bg{
        position:absolute;
          width:400px;
        height:400px;
        background-image:url("http://fc02.deviantart.net/fs71/i/2011/274/6/f/ocean__sky__stars__and_you_by_muddymelly-d4bg1ub.png");
        z-index:-1;
    }
    
    .main:hover .bg{
        opacity:0.5;
    }
    

  • Translate

    Just to add to what's already here, use the following:

    background: -moz-linear-gradient(rgba(0,0,0,.7),rgba(0,0,0,.7));
    background: -webkit-linear-gradient(rgba(0,0,0,.7),rgba(0,0,0,.7));
    background: linear-gradient(rgba(0,0,0,.7),rgba(0,0,0,.7));
    filter: unquote("progid:DXImageTransform.Microsoft.gradient( startColorstr='#b3000000', endColorstr='#b3000000',GradientType=0 )");
    

    ...for cross-browser support of a 70% linear-gradient overlay. To brighten the image, you can change all those 0,0,0's into 255,255,255's. If 70% is a bit much, go ahead and change the .7. And, for future reference check out this: http://www.colorzilla.com/gradient-editor/


  • Translate

    For me the filter/gradient approach didn't work (perhaps due to the existing CSS) so I have used :before pseudo styling trick instead:

    .eventBannerContainer {
        position: relative;
    }
    .eventBannerContainer:before {
        background-color: black;
        height: 100%;
        width: 100%;
        content: "";
        opacity: 0.5;
        position: absolute;
        display: block;
    }
    /* make any immediate child elements above our darkening mask */
    .eventBannerContainer > * {
        position: relative;
    }
    

  • Translate

    when you want to brightness or darker of background-color, you can use this css code

    .brighter-span {
      filter: brightness(150%);
    }
    
    .darker-span {
      filter: brightness(50%);
    }