将不透明度0.5设置为可滚动div的30％

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>