CSS text in the foreground with background color with a opacity-CodePudding

I have a task to implement below screen in a project.

The item box's gray background color is achieved by an opacity of 20% and a background color of #FDFFFF.

I have added the following code.

  .card{
            background-color:#171B2D;
           
            border: 1px solid #1DFB9D;
        }
        .card h1 {
            color: whitesmoke;
        }
        .item{
            padding: 1rem;
            background-color:#FDFFFF;
           

            opacity: 20%;
        }
        .item-title{
            color: #1DFB9D;
            z-index: 5;
        }
        .item-desc{
            color:#FDFFFF;
            z-index: 5;

        }

 <div >
        <h1>
            Activities log

        </h1>
        <div >
            <div >01-01-2023 | 00:00:00</div>
            <div >Username: Order note 1</div>

        </div>
    </div>

Opacity should be added to the background and the Texts "01-01-2023 | 00:00:00", "Username: Order note 1" should be on the foreground. I have added zIndex also but seems it is not working. How do I achieve this with CSS?

CodePudding user response：

The issue is you are setting the opacity on .item instead of setting the opacity on the background-color of .item

You can add the following code to change the opacity of the background and keep the text on the foreground at 100% opacity:

.item {
      background-color: rgba(253, 255, 255, 0.2);
}

This will give you an opacity of 20% for the background color, which is #FDFFFF, and keep the text on the foreground by using position: relative and z-index: 1.

  .card{
            background-color:#171B2D;
           
            border: 1px solid #1DFB9D;
        }
        .card h1 {
            color: whitesmoke;
        }
        .item{
            background-color: rgba(253, 255, 255, 0.2);
            padding: 1rem;
            position: relative;
        }
        .item-title{
            color: #1DFB9D;
            z-index: 5;
        }
        .item-desc{
            color:#FDFFFF;
            z-index: 5;

        }

 <div >
        <h1>
            Activities log

        </h1>
        <div >
            <div >01-01-2023 | 00:00:00</div>
            <div >Username: Order note 1</div>

        </div>
    </div>

CodePudding user response：

To achieve expected result, add opaccity to only background but not to the text as below

Issue is that opacity of 20% on item class is causing the color to title desc fade out

Replacing #fdffff background color to rgba(255,255,255, 0.2) with opacity will resolve the issue

codepen for reference- https://codepen.io/nagasai/pen/YzjgjVX

.card {
  background-color: #171b2d;

  border: 1px solid #1dfb9d;
}
.card h1 {
  color: whitesmoke;
}
.item {
  padding: 1rem;
  background-color: rgba(255,255,255, 0.2);
}
.item-title {
  color: #1dfb9d;
  z-index: 5;
}
.item-desc {
  color: #fdffff;
  z-index: 5;
}

<div >
        <h1>
            Activities log

        </h1>
        <div >
            <div >01-01-2023 | 00:00:00</div>
            <div >Username: Order note 1</div>

        </div>
    </div>