CODEWITHSUNDEEP
jqueryhtmlcsslessopacity
Hung PD
Hung PD

Reputation: 405

CSS Background transparency without affecting child element using LESS

I found many solutions on the internet,Stackoverflow and tried but nothing can't solve my problem. I'm using FontAwesome and LESS on my website but when I added font-icon, it affected by the opacity (rgba) of parent element. Here is my code:

http://codepen.io/thehung1724/pen/Lxjcl

Hope anyone can help me out. Thank in advance.

Upvotes: 0

Views: 382

Answers (1)

Nuno Bentes
Nuno Bentes

Reputation: 1505

Remove the before!!! In you code pen i removed the before and applied the styles to the icon container. Then background color of the parent stayed with transparency, and the icon don´t!! :)

  .icon-container{

  &:before{
    width: 50px;
    height: 50px;
    position: absolute;
    content: "";
    left: 8px;
    top: 5px;
    .rotate(45deg);
    .rgba(black, 0.4);
    z-index:1;
  }

  span{
    position:relative;
    display:block;
    z-index:2;
  }


  &:nth-child(n){
    filter: none;
  }

Upvotes: 1

Related Questions