美文网首页
前端展示背景图css渐变

前端展示背景图css渐变

作者: 倩仔6 | 来源:发表于2020-09-01 15:17 被阅读0次
      <div class="backdiv">
        <img
          src="https://wosz.oss-cn-beijing.aliyuncs.com/smart-park/smart-park-bp1.png"
          class="swiperImg"
        />
    
        <div class="backtext"></div>
      </div>
    
    <style scoped>
    .backdiv {
      height: 860rpx;
      width: 100%;
      position: relative;
      border: 0;
    }
    .backdiv img {
      width: 100%;
      height: 100%;
    }
    .backtext {
      position: absolute;
      left: 0;
      right: 0;
      top: 0;
      bottom: 0;
      border: 0;
      background: linear-gradient(
        180deg,
        rgba(241, 245, 246, 0) 0%,
        rgba(240, 242, 241, 0.84) 65%,
        rgba(242, 245, 245, 1) 100%
      );
      margin-top: 200rpx;
    }
    </style>
    
    

    相关文章

      网友评论

          本文标题:前端展示背景图css渐变

          本文链接:https://www.haomeiwen.com/subject/dqevsktx.html