I styling my login page and I want to create a div opacity under the login form, but when I do that, all layers inside it becomes opaque as well.

How to create a div opacity under other layer and not affecting its children?

P.S. currently using Tailwind in React

 <div className="max-w-[90%] w-[350px] bg-white p-8 rounded-xl opacity-50">
    <div>
      <img src={ logo } alt="Logo" />
      <label htmlFor="email">
        Email
        <input
          className="shadow appearance-none border rounded w-full py-2
            px-3 text-grey-darker"
          id="email"
          type="email"
          placeholder="[email protected]"
        />
      </label>
      ...........
    </div>
 </div>

Snippet:

body {
 background: url('https://media.istockphoto.com/photos/top-view-table-full-of-food-picture-id1220017909?k=20&m=1220017909&s=170667a&w=0&h=4I_l8ZyiZ8sebPsRo6UpFmdrV-MZgEvxb3smE-TbgLE=') no-repeat center;
}

.login {
 background: white;
 opacity: 0.5;
 display: flex:
 flex-direction: column;
 justify-content: center;
 align-items: center;
 height: 200px;
}

    <div >
          <img src="https://image.similarpng.com/very-thumbnail/2021/09/Good-food-logo-design-on-transparent-background-PNG.png" width="100px" alt="Logo" />
          <label htmlFor="email">
            Email
            <input
              id="email"
              type="email"
              placeholder="[email protected]"
            />
          </label>
          <label htmlFor="email">
            Password
            <input
              id="password"
              type="password"
              placeholder="*******"
            />
          </label>
          <button type="button"> Enter </button>
     </div>

CodePudding user response：

Lower the opacity of the background colour rather than the element itself.

Tailwind v2:

<div className="max-w-[90%] w-[350px] bg-white bg-opacity-50 p-8 rounded-xl">

Documentation

Tailwind v3:

<div className="max-w-[90%] w-[350px] bg-white/50 p-8 rounded-xl">

Documentation

CodePudding user response：

You can Control the opacity of an element’s background color using the color opacity modifier

<div className="max-w-[90%] w-[350px] bg-white bg-opacity-50 ">
 ...

</div>

It goes from 0 to 100

Here's more examples