主页 / 问题 / 588123
Accepted
modelfak
Asked:2020-11-08 05:22:06 +0000 UTC2020-11-08 05:22:06 +0000 UTC

css 效果 - 当文本超出块边界时如何使文本半透明？

  • 772

当文本超出块的边界时，如何实现这种效果？ 在此处输入图像描述

.divs { overflow:hidden; height:100px; }
.divs p { /*  style of the text  */ }
css

1 个回答

  1. Best Answer

    div {
  background: #fff;
  position: relative;
  overflow: hidden;
  width: 150px;
  height: 100px;
  font: 400 17px sans-serif;
}

div:after {
  content: '';
  width: 100%;
  height: 40px;
  position: absolute;
  left: 0;
  bottom: 0;
  background: linear-gradient(to bottom, 
    rgba(255,255,255,0) 0%,
    rgba(255,255,255,.8) 20%,
    rgba(255,255,255,1) 100%);
}
    <div>
  Example Example Example Example Example Example Example Example Example Example Example Example Example Example 
</div>

    • 4

相关问题