opacity css

1/* Answer to: "css transition opacity" */
2
3/*
4  CSS transitions allows you to change property values smoothly,
5  over a given duration.
6*/
7
8.myClass {
9  vertical-align: top;
10  transition: opacity 0.3s; /* Transition should take 0.3s */
11  -webkit-transition: opacity 0.3s; /* Transition should take 0.3s */
12  opacity: 1; /* Set opacity to 1 */
13}
14
15.myClass:hover {
16  opacity: 0.5; /* On hover, set opacity to 2 */
17}
18
19/* 
20  From `opacity: 1;` to `opacity: 0.5;`, the transition time should
21  take 0.3 seconds as soon as the client starts to hover over the
22  element.
23*/

1background: rgba(255, 255, 255, 0.25);

1.opacity30 {
2  opacity: 0.3;
3  filter: alpha(opacity=30); /* For IE8 and earlier */
4}

1h1 {background-color:rgba(255,0,0,0.3);}

1.div{
2  opacity: 0.8; /* 1 means fully visible, 0 means invisible */
3}

1div {
2  background-color: yellow;
3}
4
5.light {
6  opacity: 0.2; /* Der Text kann kaum über dem Hintergrund gelesen werden */
7}
8
9.medium {
10  opacity: 0.5; /* Der Text ist besser über dem Hintergrund lesbar */
11}
12
13.heavy {
14  opacity: 0.9; /* Der Text ist sehr deutlich über dem Hintergrund lesbar */
15}