changing opacity of certain items-CodePudding

I have created a column/box in html and there are certain images in it. I want to reduce the opacity of the column and images to be displayed at full opacity. But when I reduce the opacity of the box, it reduces the opacity of images as well. How can this issue be solved.

<h2>
  About

  <p>Cardcaptor Sakura, abbreviated as CCS, is a Japanese manga series written and illustrated by the manga group Clamp. Serialized monthly in the shōjo manga magazine Nakayoshi from May 1996 to June 2000, it was also published in 12 tankōbon volumes by
    Kodansha between November 1996 and July 2000.</p>

  <img  src="images/aboutgirl.png" alt="Home" />
</h2>

In this code it reduces the opacity of text and images as well. What can be done to display images at full opacity?

CodePudding user response：

For a working solution, you will have to wrap any text nodes inside your container element, because CSS does not allow to select text nodes.

Also, your current HTML is invalid; p cannot be a child of h2.

Once that is done, this would work:

.container>*:not(img) {
  opacity: 0.2;
}

<div >
  <h2>About</h2>

  <p>Cardcaptor Sakura, abbreviated as CCS, is a Japanese manga series written and illustrated by the manga group Clamp. Serialized monthly in the shōjo manga magazine Nakayoshi from May 1996 to June 2000, it was also published in 12 tankōbon volumes by
    Kodansha between November 1996 and July 2000.</p>

  <img  src="https://lh3.googleusercontent.com/a-/AOh14GgAlyVXY6KD4la6VneAErUHAm3vvt1zmNw360VR98o=k-s64" alt="Home" />
</div>

This is basically the same answer to the same question as this: Apply blur effect to parent container only

CodePudding user response：

div{
  color: rgba(0,0,0,0.5);
}

<div>
<h2>About<p>Cardcaptor Sakura, abbreviated as CCS, is
                a Japanese manga series written and
                illustrated by the manga group Clamp.
                Serialized monthly in the shōjo manga
                magazine Nakayoshi from May 1996 to
                June 2000, it was also published in 12
                tankōbon volumes by Kodansha between
                November 1996 and July 2000.</p>
                <img  src="images/aboutgirl.png" alt="Home" />

            </h2>
            </div>

Instead of using the opacity property, use color: rgba(). There are four arguments or values. The first are rgb values and the fourth is opacity.