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
€42.95
List Price:  €60.14
You save:  €17.18
£37.30
List Price:  £52.23
You save:  £14.92
CA$68.86
List Price:  CA$96.41
You save:  CA$27.55
A$76.77
List Price:  A$107.49
You save:  A$30.71
S$64.40
List Price:  S$90.17
You save:  S$25.76
HK$390.19
List Price:  HK$546.29
You save:  HK$156.10
CHF 40.24
List Price:  CHF 56.34
You save:  CHF 16.10
NOK kr500.18
List Price:  NOK kr700.29
You save:  NOK kr200.11
DKK kr320.58
List Price:  DKK kr448.84
You save:  DKK kr128.25
NZ$85.35
List Price:  NZ$119.50
You save:  NZ$34.14
د.إ183.58
List Price:  د.إ257.03
You save:  د.إ73.45
৳6,086.89
List Price:  ৳8,522.14
You save:  ৳2,435.24
₹4,406.11
List Price:  ₹6,168.91
You save:  ₹1,762.79
RM211.60
List Price:  RM296.26
You save:  RM84.66
₦76,597.67
List Price:  ₦107,242.87
You save:  ₦30,645.20
₨14,190.18
List Price:  ₨19,867.39
You save:  ₨5,677.20
฿1,619.37
List Price:  ฿2,267.25
You save:  ฿647.88
₺2,057.23
List Price:  ₺2,880.29
You save:  ₺823.05
B$272.20
List Price:  B$381.10
You save:  B$108.90
R885.95
List Price:  R1,240.41
You save:  R354.45
Лв83.75
List Price:  Лв117.26
You save:  Лв33.50
₩69,716.63
List Price:  ₩97,608.87
You save:  ₩27,892.23
₪169.52
List Price:  ₪237.34
You save:  ₪67.82
₱2,873.05
List Price:  ₱4,022.50
You save:  ₱1,149.45
¥7,426.70
List Price:  ¥10,397.98
You save:  ¥2,971.27
MX$937.87
List Price:  MX$1,313.09
You save:  MX$375.22
QR182.54
List Price:  QR255.58
You save:  QR73.03
P718.20
List Price:  P1,005.53
You save:  P287.33
KSh6,458.70
List Price:  KSh9,042.70
You save:  KSh2,584
E£2,424.49
List Price:  E£3,394.48
You save:  E£969.99
ብር7,102.60
List Price:  ብር9,944.21
You save:  ብር2,841.60
Kz45,588.63
List Price:  Kz63,827.73
You save:  Kz18,239.10
CLP$48,399.31
List Price:  CLP$67,762.91
You save:  CLP$19,363.60
CN¥356.46
List Price:  CN¥499.08
You save:  CN¥142.61
RD$3,145.73
List Price:  RD$4,404.27
You save:  RD$1,258.54
DA6,491.70
List Price:  DA9,088.91
You save:  DA2,597.20
FJ$113.07
List Price:  FJ$158.31
You save:  FJ$45.24
Q383.67
List Price:  Q537.17
You save:  Q153.50
GY$10,468.08
List Price:  GY$14,656.15
You save:  GY$4,188.07
ISK kr6,167.76
List Price:  ISK kr8,635.36
You save:  ISK kr2,467.60
DH450.01
List Price:  DH630.06
You save:  DH180.04
L830.88
List Price:  L1,163.30
You save:  L332.42
ден2,628.38
List Price:  ден3,679.94
You save:  ден1,051.56
MOP$402.01
List Price:  MOP$562.85
You save:  MOP$160.83
N$879.83
List Price:  N$1,231.84
You save:  N$352
C$1,842.15
List Price:  C$2,579.16
You save:  C$737
रु7,061.21
List Price:  रु9,886.26
You save:  रु2,825.05
S/176.79
List Price:  S/247.52
You save:  S/70.73
K211.93
List Price:  K296.72
You save:  K84.79
SAR187.57
List Price:  SAR262.62
You save:  SAR75.04
ZK1,182.65
List Price:  ZK1,655.81
You save:  ZK473.15
L218.18
List Price:  L305.47
You save:  L87.29
Kč1,051.46
List Price:  Kč1,472.13
You save:  Kč420.66
Ft17,017.21
List Price:  Ft23,825.45
You save:  Ft6,808.24
SEK kr472.64
List Price:  SEK kr661.74
You save:  SEK kr189.09
ARS$68,822.84
List Price:  ARS$96,357.49
You save:  ARS$27,534.64
Bs345.87
List Price:  Bs484.25
You save:  Bs138.37
COP$202,235.45
List Price:  COP$283,145.81
You save:  COP$80,910.36
₡25,306.81
List Price:  ₡35,431.55
You save:  ₡10,124.74
L1,310.57
List Price:  L1,834.90
You save:  L524.33
₲361,558.37
List Price:  ₲506,210.65
You save:  ₲144,652.28
$U2,000.31
List Price:  $U2,800.60
You save:  $U800.28
zł183.28
List Price:  zł256.61
You save:  zł73.32
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.