前端展示背景图css渐变

  <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>

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。