html - 不透明度属性在 css 中没有给出预期的结果

Question

所以我已经尝试了很长一段时间来在我正在处理的这个屏幕上创建以下效果:

我想做的是使用渐变作为背景创建一个透明效果，但我没能做到。我尝试在 css 中使用 linear-gradient() 函数，然后降低不透明度，但这是结果:

我也尝试过使用具有相同渐变的透明 svg，但是尝试使用相同的 svg 但不透明度降低也失败了:

这是我一直在使用的代码，包括 css 和 html:

        .login-section {
    
        .card {
            position: absolute;
            top: 30%;
            box-shadow: 1px 3px 9px 3px rgba(142, 142, 142, 0.19);
            border-radius: 10px 10px 10px 10px;
            min-height: 300px;
        }
    
        .gradient {
            background: url(../../../../assets/images/login.svg);
        }
    
        .login-form {
        }
    
        .logo {
            max-height: 100px;
        }
    }

 <section class="login-section d-flex flex-row justify-content-center">
    <div class="card w-100 border-0">
        <div class="card-body row p-0 mx-0">
            <div class="col gradient d-flex flex-column justify-content-center">
                <div class="d-flex flex-row justify-content-start pb-4">
                   <img src="" alt="">
                </div>
                <h5 class="text-white">Lorem Ipsum Dolor Sit Amet Lorem Ipsum</h5>
            </div>
            <div class="col login-form py-4 px-5">
                <p color="#636363" class="d-flex justify-content-center">Seja bem-vindo</p>
                <form>
                    <div class="form-group">
                        <label for="exampleInputEmail1">Email address</label>
                        <input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp"
                            placeholder="Enter email">
                        <small id="emailHelp" class="form-text text-muted">We'll never share your email with anyone
                            else.</small>
                    </div>
                    <div class="form-group">
                        <label for="exampleInputPassword1">Password</label>
                        <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
                    </div>
                    <button type="submit" class="btn btn-primary w-100">Submit</button>
                </form>
            </div>
        </div>
    </div>
</section>

Answer 1

你可以使用掩码属性 https://developer.mozilla.org/en-US/docs/Web/CSS/mask-image 考虑到这是一个实验属性，您可以查看支持 here

picture{
  display:inline-block;
  position:relative;
  
}
picture::after{
 content:"";
 position:absolute;
 top:0;
 left:0;
 width:100%;
 height: 100px;
 background: red;
 -webkit-mask-image: linear-gradient(to bottom, rgba(0,0,0,1), rgba(0,0,0,0));
  -webkit-mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat;
}

<picture>
<img src="https://www.gstatic.com/webp/gallery/1.sm.jpg"/>
</picture>