首页 文章

Opacity属性不会在css中给出预期的结果

提问于
浏览 次
0

所以我现在已经尝试了很长一段时间在我正在研究的这个屏幕上创建以下效果：

我想要做的是使用渐变作为背景创建透明效果，但我无法做到这一点 . 我试图在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>
html css twitter-bootstrap bootstrap-4

3 回答

  • 0

    试试这个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 );
}
    回复于
  • 0

    您可以使用掩码属性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>
    回复于
  • 0

    尝试在包含图像的div上使用 Opacity css功能，如下所示：

    请注意，不透明度会影响整个div，因此我建议为"background properties"创建一个单独的div，然后为内容创建另一个div;这个Article（ Look at the solution 4 on the article which is the most clean way to get that ）解释了你需要完全相同的视觉效果的过程

    .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>
    回复于

相关问题