javascript - 给可滚动 div 的 30% 不透明度 0.5

Question

我有一个可滚动的消息 div。我希望图像中可滚动 div 顶部 30% 的内容的不透明度为 0.5。 .因此，在滚动时，该 div 上出现的任何消息都应具有 0.5 的不透明度。我尝试使用带有线性渐变的额外 div 背景，但背景颜色从我的页面背景颜色中清晰可见。喜欢这张图片 所以我只想改变内容的不透明度而不是那个区域的背景。提前致谢。

.message-scroller {
    height: 48vh;
    overflow: hidden;
    overflow-y:scroll;
    position: relative;
    width: 55%;
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none;  /* IE 10+ */
    display: flex;
    //align-items: flex-end;
    background-color: black
  }


  .sc-message{
  padding: 0 10px 0 10px;
  vertical-align: bottom;
  width: 100%;
}





.single-message {
	
	margin-bottom: 12px;
	display: flex;
	word-wrap: break-word;
	flex-direction: row;
	justify-content: space-between;
	//overflow: hidden;
	font-family: 'Barlow-SemiBold';
	font-size: 22px;
	color: #ffffff;
	line-height: 24px;

	.reserved{
		margin-right: 10px;
      display: flex;
      justify-content: center;
      align-items: center;
	}
	
	.bot-img{
		display: flex;
		height: 30px;
		width: 40px;
		img{
			height: 15px;
			width: 20px;
		}
	}

	.user-img{
		display: flex;
		margin-left: auto;
		img{
			height: 20px;
			width: 15px;
		}
		// margin: auto;
		//align-items: flex-end;
	}
	.message{
		padding: 5px 10px 5px 10px;
		color: #ffffff;
		max-width: 85%;
	}

	.show-more{
		color: #DF3535;
		font-size: 24px;
	}

	.arabic-message{
		text-align: right !important;
		margin-left: auto;
		margin-right: 2vw;

	}


	.show-more:hover{
		cursor: pointer;
	}
}
img{
height: 25px;
width : 25px;
}

    <div class="message-scroller">
       <div class="sc-message">
          <div class="single-message">
             <div class="bot-img">
                <div class="reserved"></div>
             </div>
             <div class="message">
                <div class="LinesEllipsis  ">
                   <div>hello</div>
                </div>
             </div>
             <div class="user-img"><img src="
https://drive.google.com/uc?export=view&id=1G037foK0nwRpvvClvl9_WHA5bI_65goV
"></div>
          </div>
          <div class="single-message">
             <div class="bot-img"><img src="https://drive.google.com/uc?export=view&id=1pu1s3lGPPUmgiu6j0CSbkcZMVFA4c_YC
"></div>
             <div class="message">
                <div class="LinesEllipsis  ">
                   <div>Hi, How can I help you today?</div>
                </div>
             </div>
             <div class="user-img">
                <div class="reserved"></div>
             </div>
          </div>
          <div class="single-message">
             <div class="bot-img">
                <div class="reserved"></div>
             </div>
             <div class="message">
                <div class="LinesEllipsis  ">
                   <div>why?</div>
                </div>
             </div>
             <div class="user-img"><img src="
https://drive.google.com/uc?export=view&id=1G037foK0nwRpvvClvl9_WHA5bI_65goV
"></div>
          </div>
          <div class="single-message">
             <div class="bot-img"><img src="https://drive.google.com/uc?export=view&id=1pu1s3lGPPUmgiu6j0CSbkcZMVFA4c_YC
"></div>
             <div class="message">
                <div class="LinesEllipsis  ">
                   <div>Sorry, I can't answer that at this moment.<br>Feel free to ask something else in the meantime.</div>
                </div>
             </div>
             <div class="user-img">
                <div class="reserved"></div>
             </div>
          </div>
          <div class="single-message">
             <div class="bot-img">
                <div class="reserved"></div>
             </div>
             <div class="message">
                <div class="LinesEllipsis  ">
                   <div>ok</div>
                </div>
             </div>
             <div class="user-img"><img src="
https://drive.google.com/uc?export=view&id=1G037foK0nwRpvvClvl9_WHA5bI_65goV
"></div>
          </div>
          <div class="single-message">
             <div class="bot-img"><img src="https://drive.google.com/uc?export=view&id=1pu1s3lGPPUmgiu6j0CSbkcZMVFA4c_YC
"></div>
             <div class="message">
                <div class="LinesEllipsis  ">
                   <div>Okay, I can help you with queries related to HIV/AIDs</div>
                </div>
             </div>
             <div class="user-img">
                <div class="reserved"></div>
             </div>
          </div>
       </div>
    </div>

Answer 1

这是我的解决方案。

.container {
  position: relative;
  height: 200px; no need: just to get scrollable content
}

.container:before {
 content: '';
 position: absolute;
 width: 100%;
 height: 30%;
 background: linear-gradient(#00000080, #00000000);
}

.content {
   padding-bottom: 100vh;// no need : to get scrolled content

<div class="container">
  <p class="content">
  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias amet animi culpa cupiditate, dicta dignissimos distinctio dolor doloribus dolorum enim ex explicabo, harum impedit inventore ipsa molestiae nesciunt nihil omnis pariatur perferendis perspiciatis porro, quae quaerat quisquam recusandae reprehenderit repudiandae sint sit tempore totam unde veritatis voluptas voluptates? Aliquid consequuntur cumque cupiditate deleniti doloremque error harum libero, nostrum obcaecati odio optio provident quas qui recusandae sapiente sequi voluptates? Culpa dolorem dolorum esse exercitationem illum maxime minus molestias nobis officia officiis porro quos, repellat soluta! A amet animi distinctio dolore enim error ex explicabo nostrum odio quia similique soluta, totam voluptas! At culpa error harum minus reiciendis ullam voluptatem. Corporis illo ipsa perspiciatis quasi ut. Asperiores autem delectus dignissimos dolorum eius explicabo, id, illo laudantium modi neque porro quaerat qui quibusdam quidem quisquam quos sequi similique suscipit tenetur, ullam velit veritatis vitae? Ab accusantium adipisci alias aperiam asperiores at atque blanditiis consequatur corporis debitis dignissimos distinctio dolore dolorum eaqu
  </p>
  </div>