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
€48.02
List Price:  €67.23
You save:  €19.21
£39.14
List Price:  £54.79
You save:  £15.65
CA$71.63
List Price:  CA$100.29
You save:  CA$28.65
A$80.06
List Price:  A$112.09
You save:  A$32.03
S$67.51
List Price:  S$94.52
You save:  S$27.01
HK$388.46
List Price:  HK$543.88
You save:  HK$155.41
CHF 44.24
List Price:  CHF 61.94
You save:  CHF 17.70
NOK kr563.34
List Price:  NOK kr788.73
You save:  NOK kr225.38
DKK kr358.57
List Price:  DKK kr502.03
You save:  DKK kr143.46
NZ$88.43
List Price:  NZ$123.81
You save:  NZ$35.37
د.إ183.61
List Price:  د.إ257.07
You save:  د.إ73.45
৳5,964.32
List Price:  ৳8,350.53
You save:  ৳2,386.20
₹4,269.04
List Price:  ₹5,977
You save:  ₹1,707.95
RM224.30
List Price:  RM314.04
You save:  RM89.74
₦77,264.53
List Price:  ₦108,176.53
You save:  ₦30,911.99
₨13,894.99
List Price:  ₨19,454.09
You save:  ₨5,559.10
฿1,708.15
List Price:  ฿2,391.55
You save:  ฿683.40
₺1,759.41
List Price:  ₺2,463.31
You save:  ₺703.90
B$318.75
List Price:  B$446.27
You save:  B$127.52
R937.33
List Price:  R1,312.34
You save:  R375
Лв93.99
List Price:  Лв131.59
You save:  Лв37.60
₩72,848.40
List Price:  ₩101,993.60
You save:  ₩29,145.19
₪182.43
List Price:  ₪255.42
You save:  ₪72.98
₱2,932.41
List Price:  ₱4,105.61
You save:  ₱1,173.20
¥7,857.17
List Price:  ¥11,000.67
You save:  ¥3,143.49
MX$1,008
List Price:  MX$1,411.29
You save:  MX$403.28
QR181.52
List Price:  QR254.14
You save:  QR72.62
P693.18
List Price:  P970.50
You save:  P277.32
KSh6,450.70
List Price:  KSh9,031.50
You save:  KSh2,580.80
E£2,541.20
List Price:  E£3,557.88
You save:  E£1,016.68
ብር6,354.82
List Price:  ብር8,897.26
You save:  ብር2,542.43
Kz45,590.88
List Price:  Kz63,830.88
You save:  Kz18,240
CLP$49,454.60
List Price:  CLP$69,240.40
You save:  CLP$19,785.80
CN¥364.87
List Price:  CN¥510.85
You save:  CN¥145.98
RD$3,040.26
List Price:  RD$4,256.60
You save:  RD$1,216.34
DA6,753.71
List Price:  DA9,455.74
You save:  DA2,702.02
FJ$115.90
List Price:  FJ$162.28
You save:  FJ$46.37
Q384.44
List Price:  Q538.26
You save:  Q153.81
GY$10,442.13
List Price:  GY$14,619.81
You save:  GY$4,177.68
ISK kr6,976.10
List Price:  ISK kr9,767.10
You save:  ISK kr2,791
DH503.31
List Price:  DH704.68
You save:  DH201.36
L920.86
List Price:  L1,289.28
You save:  L368.41
ден2,954.07
List Price:  ден4,135.94
You save:  ден1,181.86
MOP$399.27
List Price:  MOP$559.01
You save:  MOP$159.74
N$928.04
List Price:  N$1,299.34
You save:  N$371.29
C$1,836.54
List Price:  C$2,571.30
You save:  C$734.76
रु6,797.51
List Price:  रु9,517.06
You save:  रु2,719.54
S/185.85
List Price:  S/260.20
You save:  S/74.35
K202.57
List Price:  K283.61
You save:  K81.04
SAR187.71
List Price:  SAR262.82
You save:  SAR75.10
ZK1,381.27
List Price:  ZK1,933.89
You save:  ZK552.61
L239.16
List Price:  L334.85
You save:  L95.68
Kč1,208.85
List Price:  Kč1,692.49
You save:  Kč483.63
Ft19,737.39
List Price:  Ft27,633.93
You save:  Ft7,896.53
SEK kr544
List Price:  SEK kr761.65
You save:  SEK kr217.64
ARS$51,344.11
List Price:  ARS$71,885.87
You save:  ARS$20,541.75
Bs344.88
List Price:  Bs482.86
You save:  Bs137.98
COP$220,596.26
List Price:  COP$308,852.42
You save:  COP$88,256.15
₡25,341.90
List Price:  ₡35,480.70
You save:  ₡10,138.79
L1,268.10
List Price:  L1,775.44
You save:  L507.34
₲389,249.85
List Price:  ₲544,980.94
You save:  ₲155,731.08
$U2,221.61
List Price:  $U3,110.44
You save:  $U888.82
zł204.67
List Price:  zł286.56
You save:  zł81.88
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.