semi transparent background css code example

Example 1: background color semi transparent

.transparent {
    background-color: rgba(255, 255, 255, 0.5);
}
.transparent {
    opacity: 0.5;
}

Example 2: 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 3: css opacity

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

Example 4: button transparent using css

<button type="submit" name="submitDetails">Submit Data</button>

<style>
button {
	background-color: rgba(255,255,255,0);
}
</style>

Example 5: set opacity of background image

The following example sets the opacity for the background color and not the text: 100% opacity. 60% opacity. 30% opacity. 10% opacity. You learned from our ...