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.
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.
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...
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.
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).
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
.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With