Set opacity of background image without affecting child elements

0 votes
Is there a way to change the opacity of a background picture without changing the opacity of child elements?
Jun 10 in CSS by Edureka
• 7,940 points
13 views

1 answer to this question.

0 votes

You can utilise opacity in conjunction with background colour, as shown below:

#container {
    border: solid gold 1px;   
    width: 400px;
    height: 200px;
    background:rgba(56,255,255,0.1);
}

#box {
    border: solid silver 1px;
    margin: 10px;
    width: 300px;
    height: 100px;
    background:rgba(205,206,255,0.1);
}
<div id="container">
    containter text
    <div id="box">
        box text
    </div>
</div>
answered Jun 10 by Edureka
• 8,460 points

Related Questions In CSS

0 votes
0 answers

CSS: Set a background color which is 50% of the width of the window

Attempting to create a "split-in-two" background with ...READ MORE

1 day ago in CSS by Edureka
• 7,940 points
7 views
0 votes
1 answer

CSS shadow white line at the end of linear-gradient background

This is a byproduct of the gradient ...READ MORE

answered Jun 1 in CSS by Edureka
• 8,460 points
26 views
0 votes
1 answer

Change color of PNG image via CSS?

The simplest one line that worked for ...READ MORE

answered Jun 1 in CSS by Edureka
• 8,460 points
33 views
0 votes
1 answer

Position a CSS background image x pixels from the right?

The attribute border can be used as ...READ MORE

answered Jun 10 in CSS by Edureka
• 8,460 points
14 views
0 votes
1 answer

CSS Background Opacity

The CSS opacity property can be used ...READ MORE

answered Jun 17 in CSS by Edureka
• 8,460 points
9 views
0 votes
0 answers

I am not able to create CSS Dropdown menu

I was just trying to make a ...READ MORE

Jun 21 in CSS by Edureka
• 7,940 points
7 views
0 votes
2 answers

Define a SQL query? What is the difference between SELECT and UPDATE Query? How do you use SQL in SAS?

HI.. SQL is Structured Query Language, which is ...READ MORE

answered Aug 8, 2020 in PHP by anonymous
4,469 views
0 votes
1 answer

How do I give text or an image a transparent background using CSS?

Use either a semi-transparent PNG or SVG ...READ MORE

answered May 27 in CSS by Edureka
• 8,460 points
24 views
0 votes
1 answer

How to set Bullet colors in UL/LI html lists via CSS without using any images or span tags

I use jQuery for this: jQuery('li').wrapInner('<span class="li_content" />'); & ...READ MORE

answered May 27 in CSS by Edureka
• 8,460 points
29 views
webinar REGISTER FOR FREE WEBINAR X
Send OTP
REGISTER NOW
webinar_success Thank you for registering Join Edureka Meetup community for 100+ Free Webinars each month JOIN MEETUP GROUP