Opacity in CSS

3 minutes
Share the link to this page
Copied
  Completed
You need to have access to the item to view this lesson.
One-time Fee
$49.99
List Price:  $69.99
You save:  $20
€43.65
List Price:  €61.12
You save:  €17.46
£37.73
List Price:  £52.83
You save:  £15.09
CA$68.48
List Price:  CA$95.88
You save:  CA$27.39
A$71.16
List Price:  A$99.63
You save:  A$28.47
S$64.02
List Price:  S$89.63
You save:  S$25.61
HK$391.46
List Price:  HK$548.08
You save:  HK$156.61
CHF 39.45
List Price:  CHF 55.24
You save:  CHF 15.78
NOK kr486.15
List Price:  NOK kr680.65
You save:  NOK kr194.49
DKK kr326.22
List Price:  DKK kr456.73
You save:  DKK kr130.51
NZ$85.85
List Price:  NZ$120.20
You save:  NZ$34.34
د.إ183.58
List Price:  د.إ257.03
You save:  د.إ73.45
৳6,144.50
List Price:  ৳8,602.80
You save:  ৳2,458.29
₹4,620.07
List Price:  ₹6,468.47
You save:  ₹1,848.39
RM196.48
List Price:  RM275.09
You save:  RM78.61
₦69,356.62
List Price:  ₦97,104.82
You save:  ₦27,748.20
₨13,981.74
List Price:  ₨19,575.56
You save:  ₨5,593.81
฿1,626.04
List Price:  ฿2,276.59
You save:  ฿650.55
₺2,209.10
List Price:  ₺3,092.92
You save:  ₺883.81
B$268.30
List Price:  B$375.65
You save:  B$107.34
R843.76
List Price:  R1,181.33
You save:  R337.57
Лв85.38
List Price:  Лв119.54
You save:  Лв34.16
₩74,787.50
List Price:  ₩104,708.49
You save:  ₩29,920.98
₪156.79
List Price:  ₪219.52
You save:  ₪62.72
₱2,989.35
List Price:  ₱4,185.33
You save:  ₱1,195.98
¥7,964.55
List Price:  ¥11,151.01
You save:  ¥3,186.45
MX$891.91
List Price:  MX$1,248.74
You save:  MX$356.83
QR182.02
List Price:  QR254.85
You save:  QR72.82
P682.34
List Price:  P955.34
You save:  P272.99
KSh6,462.70
List Price:  KSh9,048.30
You save:  KSh2,585.60
E£2,620.81
List Price:  E£3,669.34
You save:  E£1,048.53
ብር7,816.27
List Price:  ብር10,943.40
You save:  ብር3,127.13
Kz45,597.42
List Price:  Kz63,840.04
You save:  Kz18,242.62
CLP$46,025.29
List Price:  CLP$64,439.09
You save:  CLP$18,413.80
CN¥344.74
List Price:  CN¥482.66
You save:  CN¥137.92
RD$3,076.41
List Price:  RD$4,307.22
You save:  RD$1,230.81
DA6,623.73
List Price:  DA9,273.75
You save:  DA2,650.02
FJ$110.99
List Price:  FJ$155.39
You save:  FJ$44.40
Q384
List Price:  Q537.63
You save:  Q153.63
GY$10,476.18
List Price:  GY$14,667.49
You save:  GY$4,191.31
ISK kr6,296.24
List Price:  ISK kr8,815.24
You save:  ISK kr2,519
DH471.62
List Price:  DH660.30
You save:  DH188.68
L875.48
List Price:  L1,225.75
You save:  L350.26
ден2,692.03
List Price:  ден3,769.07
You save:  ден1,077.03
MOP$403.66
List Price:  MOP$565.16
You save:  MOP$161.49
N$841.02
List Price:  N$1,177.50
You save:  N$336.47
C$1,842.53
List Price:  C$2,579.69
You save:  C$737.15
रु7,395.40
List Price:  रु10,354.15
You save:  रु2,958.75
S/172.68
List Price:  S/241.76
You save:  S/69.08
K218.96
List Price:  K306.56
You save:  K87.60
SAR187.58
List Price:  SAR262.64
You save:  SAR75.05
ZK974.65
List Price:  ZK1,364.60
You save:  ZK389.94
L222.40
List Price:  L311.38
You save:  L88.98
Kč1,066.96
List Price:  Kč1,493.84
You save:  Kč426.87
Ft17,099.08
List Price:  Ft23,940.09
You save:  Ft6,841
SEK kr470.37
List Price:  SEK kr658.56
You save:  SEK kr188.18
ARS$69,898.52
List Price:  ARS$97,863.52
You save:  ARS$27,965
Bs346.01
List Price:  Bs484.45
You save:  Bs138.43
COP$184,354.73
List Price:  COP$258,111.38
You save:  COP$73,756.64
₡23,559.94
List Price:  ₡32,985.81
You save:  ₡9,425.86
L1,325.48
List Price:  L1,855.78
You save:  L530.30
₲323,053.08
List Price:  ₲452,300.17
You save:  ₲129,247.08
$U2,018.88
List Price:  $U2,826.59
You save:  $U807.71
zł186.41
List Price:  zł260.99
You save:  zł74.57
Already have an account? Log In

Transcript

Today we are going to discuss about the office city. So first of all what is the opposite city? So opposite the properties specify the office city of an element or transparency on a particular element. So how before doing this I'm going to come in place we can easily get the call. Now for suppose I'm saying I have a div for my Dave, I have a class. I'm seeing my Okay, now I'm seeing that this class has some properties, like background thread.

Worth is 200 pixel height is 400 pixel. Now go to the page refresh the page and as you can see there's 200 pixels out. And what is 400 word? Now I'm saying that the opposite of capacity or capacity is 0.5. With the refresh the page now as you can see 0.5 is the half of the one for suppose if you are saying 0.1 As you can see, it's just showing you if you are saying the opposite is one that means there's 100 100% visible. So now if you are seeing that 0.7 As you can see, it's 70% visible if your things your point nine that means 90% visible if you are seeing that 0.1 that means it's 10 person visible, you can also add the proper opposite effect.

For your images, I'm saying that I have image, which is a source, I'm saying the assets and I have a logo dot png image, go to the page refresh the page we have a logo, or if I have more than one logo IMG IMG dot, jpg image. This is a jpg image. jpg. Refresh the page. This is the JPEG image. Now I'm seeing that apply the opposite on the image, so I have a single image of x y.

The first refresh the page. Now as you can see, your image is now has 10 person. visibility. Now if I'm saying that 5% 0.5 that means 50%. If I'm saying one for this is 100%. If I'm saying 0.8, that means it's 80% visibility.

So this is very useful property you can because I have used this property, a lot of projects while working on projects. So I think this is enough for today in the next lecture we're going to cover some other topics. So thank you for watching.

Sign Up

Share

Share with friends, get 20% off
Invite your friends to LearnDesk learning marketplace. For each purchase they make, you get 20% off (upto $10) on your next purchase.