Set opacity of background image without affecting child elements

前端 未结 15 2157
闹比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:12

    Take your image into an image editor, turn down the opacity, save it as a .png and use that instead.

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

    we can figure out that by not playing with opacity just by using rgba color

    e.g "background-color: rgba(0,0,0, 0.5)"

    Sample :

    Previous Css:

     .login-card {
      // .... others CSS
      background-color: #121e1b;
      opacity: 0.5;
    }
    

    To :

     .login-card {
          // .... others CSS
          background-color: rgba(0, 0, 0, 0.5);
        }
    
    0 讨论(0)
  • 2020-11-22 02:14

    Just to add to the above..you can use the alpha channel with the new color attributes eg. rgba(0,0,0,0) ok so this is black but with zero opacity so as a parent it will not affect the child. This only works on Chrome, FF, Safari and....I thin O.

    convert your hex colours to RGBA

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

    This will work with every browser

    div {
     -khtml-opacity:.50; 
     -moz-opacity:.50; 
     -ms-filter:"alpha(opacity=50)";
      filter:alpha(opacity=50);
      filter: progid:DXImageTransform.Microsoft.Alpha(opacity=0.5);
      opacity:.50; 
    }
    

    If you don't want transparency to affect the entire container and its children, check this workaround. You must have an absolutely positioned child with a relatively positioned parent.

    Check demo at http://www.impressivewebs.com/css-opacity-that-doesnt-affect-child-elements/

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

    You can put the image in the div:after or div:before and set the opacity on that "virtual div"

    div:after {
      background: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/3/owl1.jpg);
      opacity: 0.25;
    }
    

    found here http://css-tricks.com/snippets/css/transparent-background-images/

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

    You can use CSS linear-gradient() with rgba().

    div {
      width: 300px;
      height: 200px;
      background: linear-gradient(rgba(255,255,255,.5), rgba(255,255,255,.5)), url("https://i.imgur.com/xnh5x47.jpg");
    }
    span {
      background: black;
      color: white;
    }
    <div><span>Hello world.</span></div>

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