1.opacity30 {
2 opacity: 0.3;
3 filter: alpha(opacity=30); /* For IE8 and earlier */
4}
1/*
2 You have to fake it, as there is no such property
3*/
4
5div {
6 width: 200px; /* Image Width */
7 height: 200px; /* Image Height */
8 display: block;
9 position: relative;
10}
11
12div::after {
13 content: "";
14 background: url(image.jpg);
15 opacity: 0.5;
16 top: 0;
17 left: 0;
18 bottom: 0;
19 right: 0;
20 position: absolute;
21 z-index: -1;
22}
1/*background color opacity with explainations */
2rgba(51, 170, 51, .1) /* 10% opaque green */
3rgba(51, 170, 51, .4) /* 40% opaque green */
4rgba(51, 170, 51, .7) /* 70% opaque green */
5rgba(51, 170, 51, 1) /* full opaque green */
6
1div {
2 width: 200px;
3 height: 200px;
4 display: block;
5 position: relative;
6}
7
8div::after {
9 content: "";
10 background: url(image.jpg);
11 opacity: 0.5;
12 top: 0;
13 left: 0;
14 bottom: 0;
15 right: 0;
16 position: absolute;
17 z-index: -1;
18}