Making Text Background Transparent But Not Text Itself

.container{  position: relative;      /* The image used */    background-image: url("https://www.elephantsdeli.com/wp-content/uploads/fly-images/1673/elephants-delicatessen-sack-lunch-order-form-hero-image.jpg-1920x1080.jpg");
    /* Full height */    height:100vh;     /* Center and scale the image nicely */    background-position: center;    background-repeat: no-repeat;    background-size: cover;}.background {  height: 100vh;  background: rgba(255 , 255, 255, 0.5)}.text-center {  padding:50px 0;}

<div class="container" ><div class="background">  <h1 style="font-size: 350%;" class="text-center"><b>It's Lunch-Time!</b></h1>  </div></div>

Change one of the bootstrap's background transparency without affecting text

Yes, use css rgba(red, green, blue, opacity) to set opacity exclusively on the parent element's background property.

But note that Bootstrap v4 sets css:

.bg-secondary {
   background-color: #6c757d!important;
}

Also, because hexadecimal rgba() is still lacking comprehensive browser support, it's advisable to convert hexadecimal #6c757d into it's decimal equivalent. In your case the Bootstrap override would be:

.bg-secondary {
  background-color: rgba(108, 117, 125, 0.6) !important;
}

For your style to override bootstrap's style definition, you must define it after the bootstrap stylesheet and use the !important post-fix as well.

Here's a working fiddle.

Can I set an opacity only to the background image of a div?

Nope, this cannot be done since opacity affects the whole element including its content and there's no way to alter this behavior. You can work around this with the two following methods.

Secondary div

Add another div element to the container to hold the background. This is the most cross-browser friendly method and will work even on IE6.

HTML

<div class="myDiv">
    <div class="bg"></div>
    Hi there
</div>

CSS

.myDiv {
    position: relative;
    z-index: 1;
}

.myDiv .bg {
    position: absolute;
    z-index: -1;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background: url(test.jpg) center center;
    opacity: .4;
    width: 100%;
    height: 100%;
}

See test case on jsFiddle

:before and ::before pseudo-element

Another trick is to use the CSS 2.1 :before or CSS 3 ::before pseudo-elements. :before pseudo-element is supported in IE from version 8, while the ::before pseudo-element is not supported at all. This will hopefully be rectified in version 10.

HTML

<div class="myDiv">
    Hi there
</div>

CSS

.myDiv {
    position: relative;
    z-index: 1;
}

.myDiv:before {
    content: "";
    position: absolute;
    z-index: -1;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background: url(test.jpg) center center;
    opacity: .4;
}

Additional notes

Due to the behavior of z-index you will have to set a z-index for the container as well as a negative z-index for the background image.

Test cases

See test case on jsFiddle:

• Using CSS 2.1 :before
• Using CSS 3 ::before

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/

CSS : Background opacity is showing on text

Have a look at the following example. Instead of opacity use rgba.
According to docs:

opacity applies to the element as a whole, including its contents, even though the value is not inherited by child elements. Thus, the element and its children all have the same opacity relative to the element's background, even if they have different opacities relative to one another.

#backgroundimage {  background: url("https://www.solidbackgrounds.com/images/640x480/640x480-aero-solid-color-background.jpg");  height: 500px}
#container {  background-color: rgba(76,76,76,.5);}
#text {  color: #ffffff;}

<div id="backgroundimage">  <div id="container">    <p id="text">      Some text here    </p>  </div></div>

background-color: rgba(255, 0, 0, 0.5);

<p style="background-color: rgba(255, 0, 0, 0.5);">
  <span>Hello, World!</span>
</p>