不透明度属性无法在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

您可以使用mask属性 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>

Answer 2

尝试此CSS

.grad{
background: rgba(212,228,239,1);
background: -moz-linear-gradient(left, rgba(212,228,239,1) 0%, rgba(134,174,204,0.49) 100%);
background: -webkit-gradient(left top, right top, color-stop(0%, rgba(212,228,239,1)), color-stop(100%, rgba(134,174,204,0.49)));
background: -webkit-linear-gradient(left, rgba(212,228,239,1) 0%, rgba(134,174,204,0.49) 100%);
background: -o-linear-gradient(left, rgba(212,228,239,1) 0%, rgba(134,174,204,0.49) 100%);
background: -ms-linear-gradient(left, rgba(212,228,239,1) 0%, rgba(134,174,204,0.49) 100%);
background: linear-gradient(to right, rgba(212,228,239,1) 0%, rgba(134,174,204,0.49) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#d4e4ef', endColorstr='#86aecc', GradientType=1 );
}

Answer 3

尝试在包含以下图像的div上使用 不透明度 css功能：

请注意，不透明度会影响整个div，因此建议您为“背景属性”创建一个单独的div，然后为内容创建另一个div； Article（ 请参阅文章中的解决方案4，这是最干净的方法 ）解释了您所需的视觉效果完全相同的过程

        .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);
            opacity: 0.5;
        }
    
        .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>