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, 2022 in CSS by Edureka
• 12,890 points
430 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, 2022 by Edureka
• 11,450 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, 2022 in CSS by Edureka
• 11,450 points
320 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, 2022 in CSS by Edureka
• 11,450 points
1,070 views
0 votes
1 answer

Change color of PNG image via CSS?

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

answered Jun 1, 2022 in CSS by Edureka
• 11,450 points
2,648 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, 2022 in CSS by Edureka
• 11,450 points
225 views
0 votes
1 answer

CSS Background Opacity

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

answered Jun 17, 2022 in CSS by Edureka
• 11,450 points
241 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, 2022 in CSS by Edureka
• 11,450 points
161 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, 2022 in CSS by Edureka
• 12,890 points
114 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, 2022 in CSS by Edureka
• 12,890 points
345 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, 2022 in CSS by Edureka
• 11,450 points
1,295 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, 2022 in CSS by Edureka
• 11,450 points
118 views
webinar REGISTER FOR FREE WEBINAR X
REGISTER NOW
webinar_success Thank you for registering Join Edureka Meetup community for 100+ Free Webinars each month JOIN MEETUP GROUP