Today, I am developing a mode animation floating on top of the background image. Previously, I only remember that opacity setting can be achieved with opacity setting on opacity and rGBA, but it is not feasible to achieve the effect of “background transparency and text opacity”, so let’s actually test it.

There are three common methods for CSS to achieve transparency. The following methods are 50% opacity

  • Opacity 😡 for cSS3, which ranges from 0 to 1, such as opacity: 0.5
  • Css3 rgba(red, green, blue, alpha), alpha values from 0 to 1, such as rgba(255,255,255,0.5)
  • Any filter:Alpha(opacity=x), x values from 0 to 100, such as filter:Alpha(opacity=50)

This article discusses the above two methods, which can also be used in IE but not explained.

Background opacity and text opacity cannot be achieved >

Any offspring of the opacity element that is set will be transparent together 

<! DOCTYPE html> <html> <head> <meta charset="utf-8">
<title>opacity</title>
<style>
.trans{
  padding: 25px;
  background-color:# 000000;Opacity: 0.2; } .trans p{ color: red; } </style> </head> <body> <div class="trans"> <p> Test text </p> </div> </ HTML >Copy the code


(2) rgba rgba(0,0,0,0.2) color RGB trichromatic value, and transparency

<! DOCTYPE html> <html> <head> <meta charset="utf-8"> < span style>. Trans {padding: 25px; Background - color: rgba (0,0,0,0.2); }. Trans p{color: red;}. } </style> </head> <body> <div class="trans"> <p> Test text </p> </div> </ HTML >Copy the code