Свойство непрозрачности не дает ожидаемого результата в CSS

Question

Итак, я довольно долго пытался создать на этом экране следующий эффект, над которым я работаю:

ЧтоЯ хочу создать прозрачный эффект, используя градиент в качестве фона, но я не смог этого сделать.Я пытался использовать функцию линейного градиента () в CSS, а затем уменьшить непрозрачность, но это было результатом:

Я такжеПопытка использовать прозрачный 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

попробуйте это 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 2

Попробуйте использовать функцию Непрозрачность css на элементе div, содержащем изображение, например:

Обратите внимание, что степень непрозрачности влияет на весь элемент div, поэтому я предлагаю создатьотдельный div для «фоновых свойств», а затем еще один для содержимого;эта статья ( Посмотрите на решение 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>

Answer 3

Вы можете использовать свойство маски https://developer.mozilla.org/en-US/docs/Web/CSS/mask-image Примите во внимание, что это экспериментальное свойство, вы можете проверить поддержку здесь

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>