Css Opacity Only to Background Color, Not the Text on It

CSS opacity only to background color, not the text on it?

It sounds like you want to use a transparent background, in which case you could try using the rgba() function:

rgba(R, G, B, A)
R (red), G (green), and B (blue) can be either <integer>s or <percentage>s, where the number 255 corresponds to 100%. A (alpha) can be a <number> between 0 and 1, or a <percentage>, where the number 1 corresponds to 100% (full opacity).
RGBa example
background: rgba(51, 170, 51, .1)    /*  10% opaque green */ 
background: rgba(51, 170, 51, .4)    /*  40% opaque green */ 
background: rgba(51, 170, 51, .7)    /*  70% opaque green */ 
background: rgba(51, 170, 51,  1)    /* full opaque green */ 

A small example showing how rgba can be used.

As of 2018, practically every browser supports the rgba syntax.

CSS: opacity only background, not the text inside

The easy way would be to move the text into a separate div, like so. Basically you apply the opacity to a separate div and position the text on top...

<div id="parent">
   <div id="opacity"></div>
   <div id="child">text</div>
</div>

div#parent { position:relative; width:200px; height:200px; }
div#child { position:absolute; width:200px; height:200px; z-index:2; }
div#opacity { position:absolute; width:200px; height:200px; z-index:1; }

The other route would be rgba. Don't forget there's a separate css property to feed IE since it doesn't support the rgba property. You can also feed a transparent png.

#regForm {
   background: rgb(200, 54, 54); /* fallback color */
   background: rgba(200, 54, 54, 0.5);
}

And for IE...

<!--[if IE]>

   <style type="text/css">

   .color-block {
       background:transparent;
       filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000050,endColorstr=#99000050);
       zoom: 1;
    } 

    </style>

<![endif]-->

Personally I'd go with the first option because it's less of a hassle.

Opacity of background-color, but not the text

Use rgba!

.alpha60 {
    /* Fallback for web browsers that don't support RGBa */
    background-color: rgb(0, 0, 0);
    /* RGBa with 0.6 opacity */
    background-color: rgba(0, 0, 0, 0.6);
    /* For IE 5.5 - 7*/
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000);
    /* For IE 8*/
    -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000)";
}

In addition to this, you have to declare background: transparent for IE web browsers, preferably served via conditional comments or similar!

via http://robertnyman.com/2010/01/11/css-background-transparency-without-affecting-child-elements-through-rgba-and-filters/

Apply opacity to background image but not text

opacity is not an inherit property but affect the content so when you increase the opacity of .image that also affects to .text, you can use pseudo elements and background: rgba() to achieve what you want like this:

Here a working JSFiddle to play with

.wrap {    width: 100%;}.image {    background-image: url("https://i.stack.imgur.com/gijdH.jpg?s=328&g=1");    position: relative;    height: 100vh;}.image:before{    content: '';    position: absolute;    top: 0;    right: 0;    left: 0;    bottom: 0;    background: rgba(0,0,0,0.7);}.text {    color: #FFF;    position: relative;}

<div class="wrap">    <div class="image">        <div class="text">            <p>I LOVE YOU</p>        </div>    </div></div>

How to set opacity ONLY to the background

You can specify the background color with rgba()

element{
   background-color: rgba(255, 255, 255, 0.5);
}

The first three values are the RGB levels, and the last one is the opacity (in this case 50% opaque, the higher the number the less transparent)

How to set opacity only on button text color without rgba?

You can use the 8-digit HEX code color like this:

div {  background-color: #000;  color: #ffffff80;}

<div>text</div>

How to make opacity only for background?

Hi if your background does not has any Images.
Then easily you can apply opacity on it background.
Here is some example you can use ->

background-color: #00ff0055;
/*-- The value after six digit is your alpha color or opacity of background.--*/
background-color: #0f05; /*-- Same as previous one.--*/
background-color: rgba(0,255,0,.5); /*-- a extend for alpha color--*/

Hope this help you.

Is there any way to opacity only background of a text in css?

Sure, use rgba():

div ul li a.title {
    padding: 0px 12px 0 0px;
    background:rgba(255,0,0,.2);
}

jsFiddle example

Problem with the div on the opacity background

Like this?

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous"><script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>

<div class="modal">        <input id="modal__trigger" type="checkbox" />        <label for="modal__trigger">pokaz</label>        <div class="modal__overlay" role="dialog" aria-labelledby="modal__title" aria-describedby="modal_desc">            <div class="modal__wrap">                <img src="{{ asset('img/popup1.png') }}" class="img-fluid">                <h2 id="modal__title">This is your modal content</h2>                <p id="modal__desc">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ac laoreet elit. Phasellus dignissim purus vitae urna cursus, quis congue ligula tristique. Ut nec blandit risus. Donec at orci ut justo venenatis viverra. Suspendisse in volutpat lacus. In enim est, dapibus eget ipsum sed, suscipit ultrices diam.</p>                <label for="modal__trigger" class="closePopupBtn">Zamknij</label>            </div>        </div>    </div>


    <style>    .modal {    background: #fff;    box-shadow: 0 0 3px rgba(0, 0, 0, 0.15);    display: inline-block;    padding: 1em;}
.modal__overlay {    bottom: 0;    left: 0;    position: fixed;    right: 0;    text-align: center;    text-shadow: none;    top: 0;    z-index: 600;}
.modal__wrap {    position: relative;    margin: 0 auto;    width: 90%;
    margin-top: 30px;    max-width: 600px;    max-height: 600px;    background-color: white;    padding: 1.5em;    z-index: 1000;}
#modal__title {    color: black;    font-size: 18px;    padding-top: 20px;}
#modal__desc {    margin: 0;    color: black;    font-size: 16px;    padding-top: 1px;}
.closePopupBtn {    clear: both;    color: white;    background-color: #ED1B23;    line-height: 1.65;    display: block;    width: 140px;    height: 50px;    text-align: center;    font-size: 30px;    margin: 10px auto;    padding-bottom: 30px;    cursor: pointer;    text-transform: uppercase;}

.modal input:focus ~ label {    -webkit-transform: scale(0.97);    transform: scale(0.97);}
input {    position: absolute;    top: -1000px;}

.modal__overlay {    opacity: 0;    -webkit-transform: scale(0.5);    transform: scale(0.5);    -webkit-transition: all 0.75s cubic-bezier(0.68, -0.55, 0.265, 1.55);    transition: all 0.75s cubic-bezier(0.68, -0.55, 0.265, 1.55);    z-index: -100;    background-color: black;}
.modal__overlay::after {    content: '';    width: 100%;    height: 100%;    position: absolute;    top: 0;    left: 0;    right: 0;    opacity: 0.5;    background-color: white;    opacity: 1;}
input:checked ~ .modal__overlay {    opacity: 1;    -webkit-transform: scale(1);    transform: scale(1);    z-index: 800;}
input:checked ~ .modal__overlay::after {    content: '';    opacity: 0.5;}

</style>

Css Opacity Only to Background Color, Not the Text on It