qq_41833439
技术小新Nora
采纳率100%
2019-03-20 10:12 阅读 2.6k

CSS3-可以用css实现中间高亮 两边渐变透明的效果吗

10

图片说明
大概的效果图类似这样,求大神给个解题思路

  • 点赞
  • 写回答
  • 关注问题
  • 收藏
  • 复制链接分享

2条回答 默认 最新

  • 已采纳
    FeiRouBing FeiRouBing 2019-03-20 10:33

    在上面叠加一层div,大小完全覆盖

    核心样式 background:linear-gradient(rgba(0,0,0,1), rgba(00,0,0), rgba(0,0,0,1));

    <style>
    .box{background:#000;color:#fff;height:400px;width:100%;position:relative;}
    .mask {
        height: 400px;
        width:100%;
        position:absolute;
        left:0;
        top:0;
        background: linear-gradient(rgba(0,0,0,1), rgba(0,0,0,0), rgba(0,0,0,1));
    }
    </style>
    <div class=box>
        11111111<br>
        11111<br>
        11111<br>
        11111<br>
        11111<br>
        1111111111<br>
        11111<br>
        1111111111<br>
        11111<br>
        1111111111<br>
        11111<br>
        1111111111<br>
        11111<br>
        1111111111<br>
        11111<br>
        11111<br>
        11111
        <div class="mask"></div>
    </div>
    
    点赞 1 评论 复制链接分享
  • gsjlcc gsjlcc 2019-09-10 15:23

    background: linear-gradient(
    to right,
    rgba(0,0,0,0) 0%,
    rgba(0,0,0,0) 10%,
    rgba(35,198,200,0.3) 20%,
    rgba(35,198,200,0.4) 30%,
    rgba(35,198,200,0.5) 40%,
    rgba(35,198,200,0.8) 50%,
    rgba(35,198,200,0.5) 60%,
    rgba(35,198,200,0.4) 70%,
    rgba(35,198,200,0.3) 80%,
    rgba(0,0,0,0) 90%,
    rgba(0,0,0,0) 100%)
    }

    点赞 2 评论 复制链接分享

相关推荐