Set opacity of background image without affecting child elements

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

提交回复
热议问题