Set opacity of background image without affecting child elements

前端 未结 15 2158
闹比i
闹比i 2020-11-22 01:39

Is it possible to set the opacity of a background image without affecting the opacity of child elements?

Example

All links in the footer need a custom bull

相关标签:
15条回答
  • 2020-11-22 02:22

    Another option is CSS Tricks approach of inserting a pseudo element the exact size of the original element right behind it to fake the opaque background effect that we're looking for. Sometimes you will need to set a height for the pseudo element.

    div {
      width: 200px;
      height: 200px;
      display: block;
      position: relative;
    }
    
    div::after {
      content: "";
      background: url(image.jpg);
      opacity: 0.5;
      top: 0;
      left: 0;
      bottom: 0;
      right: 0;
      position: absolute;
      z-index: -1;   
    }
    
    0 讨论(0)
  • 2020-11-22 02:28

    If you are using the image as a bullet, you might consider the :before pseudo element.

    #footer ul li {
    }
    
    #footer ul li:before {
        content: url(/images/arrow.png);
        filter:alpha(opacity=50);
        filter: progid:DXImageTransform.Microsoft.Alpha(opacity=0.5);
        opacity:.50;
    }
    
    0 讨论(0)
  • 2020-11-22 02:28
    #footer ul li
         {
           position:relative;
           list-style:none;
         }
        #footer ul li:before
         {
           background-image: url(imagesFolder/bg_demo.png);
           background-repeat:no-repeat;
           content: "";
           top: 5px;
           left: -10px;
           bottom: 0;
           right: 0;
           position: absolute;
           z-index: -1;
           opacity: 0.5;
        }
    

    You can try this code. I think it will be worked. You can visit the demo

    0 讨论(0)
  • 2020-11-22 02:34

    To really fine-tune things, I recommend placing the appropriate selections in browser-targeting wrappers. This was the only thing that worked for me when I could not get IE7 and IE8 to "play nicely with others" (as I am currently working for a software company who continues to support them).

    /* color or background image for all browsers, of course */            
    #myBackground {
        background-color:#666; 
    }
    /* target chrome & safari without disrupting IE7-8 */
    @media screen and (-webkit-min-device-pixel-ratio:0) {
        #myBackground {
            -khtml-opacity:.50; 
            opacity:.50;
        }
    }
    /* target firefox without disrupting IE */
    @-moz-document url-prefix() {
        #myBackground {
            -moz-opacity:.50;
            opacity:0.5;
        }
    }
    /* and IE last so it doesn't blow up */
    #myBackground {
        opacity:.50;
        filter:alpha(opacity=50);
        filter: progid:DXImageTransform.Microsoft.Alpha(opacity=0.5);
    }
    

    I may have redundancies in the above code -- if anyone wishes to clean it up further, feel free!

    0 讨论(0)
  • 2020-11-22 02:34

    If you have to set the opacity only to the bullet, why don't you set the alpha channel directly into the image? By the way I don't think there is a way to set the opacity to a background image via css without changing the opacity of the whole element (and its children too).

    0 讨论(0)
  • 2020-11-22 02:34

    I found a pretty good and simple tutorial about this issue. I think it works great (and though it supports IE, I just tell my clients to use other browsers):

    CSS background transparency without affecting child elements, through RGBa and filters

    From there you can add gradient support, etc.

    0 讨论(0)
提交回复
热议问题