CSS opacity property: transparency control

CSS opacity. . .

opacity css :

selector {
  opacity: 1;
}

selector {
  opacity: 0;
}

selector {
  opacity: 0.4;
}
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
    

0 1. , CSS .

, .

, . opacity: 1 .

, , . " ", . CSS- opacity .

parent {
 opacity: 0.7;
}

child {
 opacity: 1;
}
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
    

child 30 % , opacity .

1. . , target .

.target {
  background: black;
  opacity: 0.5;
}
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
    

target, .

2. . CSS opacity target .

.target {
  opacity: 0.2;
}

.target:hover {
  opacity: 1;
}
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
    

, , . javascript CSS opacity, transition animation .

, style .

//    
var opacity = element.style.opacity;

//   
element.style.opacity = 0.4;
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
    

CSS- transition:

element {
 opacity: 0.1;
 transition: opacity 1000ms;
}

element:hover {
 opacity: 0.8;
 transition: opacity 2000ms;
}
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
    

element 10 80 % , - .

CSS opacity transition .

- opacity

opacity CSS:

• , , ;
• , .

, opacity , RGBA HSLA.