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
• 10,120 points
49 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
• 9,540 points

Related Questions In CSS

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
• 9,540 points
48 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
• 9,540 points
226 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
• 9,540 points
361 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
• 9,540 points
32 views
0 votes
1 answer

CSS Background Opacity

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

answered Jun 17 in CSS by Edureka
• 9,540 points
14 views
0 votes
1 answer

I am not able to create CSS Dropdown menu

Use any element to open the dropdown ...READ MORE

answered Jun 28 in CSS by Edureka
• 9,540 points
40 views
0 votes
0 answers

How to make in CSS an overlay over an image?

I want to add this dark hue, ...READ MORE

Jul 22 in CSS by Edureka
• 10,120 points
19 views
0 votes
0 answers

Using CSS for a fade-in effect on page load

Can a text paragraph fade in on ...READ MORE

Jul 29 in CSS by Edureka
• 10,120 points
15 views
0 votes
1 answer

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

You can make a hard distinction instead ...READ MORE

answered Jun 28 in CSS by Edureka
• 9,540 points
56 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
• 9,540 points
38 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