Example 1: set background image opacity
#bg{ background-image: url('images/wood1.jpg'); opacity:0.2; width:300px; height:300px; }
Example 2: css opacity example
.opacity30 { opacity: 0.3; filter: alpha(opacity=30); /* For IE8 and earlier */ }
Example 3: background image opacity css
body::before{ content: ""; position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: -1; background-image: url(image.jpg); /*Put your image url*/ background-size: cover; background-position: center; opacity: 0.25; /*Value from 0.0 to 1.0*/ }
Example 4: background image opacity css
/* Two ways to make images opaque */ div { background-color : rgba(120, 120, 120, 0.5) /* the 0.5 is the value of opacity on a scale of 0-1 */ } /* OR */ div { background-color : blue opacity : 50% }
Example 5: css background image opacity
/* You have to fake it, as there is no such property */ div { width: 200px; /* Image Width */ height: 200px; /* Image Height */ display: block; position: relative; } div::after { content: ""; background: url(image.jpg); opacity: 0.5; top: 0; left: 0; bottom: 0; right: 0; position: absolute; z-index: -1; }
Example 6: transparent background css
div { width: 200px; height: 200px; display: block; position: relative; } div::after { content: ""; background: url(image.jpg); opacity: 0.5; top: 0; left: 0; bottom: 0; right: 0; position: absolute; z-index: -1; }
Comments
Post a Comment