Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Make bootstrap well semi transparent

I tried to make the bootstrap well semi transparent by adding opacity:0.4 but this results in making the text semitransparent as well. Is there any way to make the well semi transparent without making the body lose opacity as well.

like image 221
SoWhat Avatar asked Aug 16 '13 13:08

SoWhat


People also ask

How do you make a half background transparent?

Changing the opacity of the background color only To achieve this, use a color value which has an alpha channel—such as rgba. As with opacity , a value of 1 for the alpha channel value makes the color fully opaque. Therefore background-color: rgba(0,0,0,. 5); will set the background color to 50% opacity.

How do I make bootstrap card transparent?

In Bootstrap 4 you can type "opacity-50" into class thats mean opacity:0.5 in css without type any css code and "opacity-30" thats mean opacity:0.3 in css etc...

How do I make a semi transparent background in HTML?

use opacity css property. Do you want a semi transparent background color or image? Add this to your CSS background-color:rgba(255,0,0,0.5) . Increase or decrease the 0.5 to lower or raise the opacity.

How do I make a div little transparent?

To set the opacity of a background, image, text, or other element, you can use the CSS opacity property. Values for this property range from 0 to 1. If you set the property to 0, the styled element will be completely transparent (ie. invisible).


1 Answers

Change the background-color instead of changing its opacity

.well {
   background-color: rgba(245, 245, 245, 0.4);
}

With a notice that the value 245 comes from the default background-color of the .well class: #F5F5F5.

like image 197
Hieu Le Avatar answered Nov 15 '22 13:11

Hieu Le