遮罩层

毛玻璃

使用ground-glass 类名为元素创建“磨砂玻璃”类型的背景。

演示

代码

HTML

代码

JSX/TSX

lorem ipsum dolor sit amet, consectetur, lorem ipsum dolor sit amet, consectetur

lorem ipsum dolor sit amet, consectetur

<div class="rounded-xl bg-bw-300 w-full h-40 overflow-scroll relative">
	<div class="success w-full h-20 ground-glass sticky top-0 inset-x-0" />
	<div class="-mt-20">
		<p>
			lorem ipsum dolor sit amet, consectetur, lorem ipsum dolor sit amet,
			consectetur
		</p>
		<p>
			lorem ipsum dolor sit amet, consectetur, lorem ipsum dolor sit amet,
			consectetur
		</p>
		<p>
			lorem ipsum dolor sit amet, consectetur, lorem ipsum dolor sit amet,
			consectetur
		</p>
		<p>
			lorem ipsum dolor sit amet, consectetur, lorem ipsum dolor sit amet,
			consectetur
		</p>
		<p>lorem ipsum dolor sit amet, consectetur</p>
		<p>lorem ipsum dolor sit amet, consectetur</p>
		<p>lorem ipsum dolor sit amet, consectetur</p>
		<p>lorem ipsum dolor sit amet, consectetur</p>
		<p>lorem ipsum dolor sit amet, consectetur</p>
	</div>
</div>

<div className='rounded-xl bg-bw-300 w-full h-40 overflow-scroll relative'>
  <div className='success w-full h-20 ground-glass sticky top-0 inset-x-0' />
  <div className='-mt-20'>
    <p>
      lorem ipsum dolor sit amet, consectetur, lorem ipsum dolor sit amet, consectetur
    </p>
    <p>
      lorem ipsum dolor sit amet, consectetur, lorem ipsum dolor sit amet, consectetur
    </p>
    <p>
      lorem ipsum dolor sit amet, consectetur, lorem ipsum dolor sit amet, consectetur
    </p>
    <p>
      lorem ipsum dolor sit amet, consectetur, lorem ipsum dolor sit amet, consectetur
    </p>
    <p>
      lorem ipsum dolor sit amet, consectetur
    </p>
    <p>
      lorem ipsum dolor sit amet, consectetur
    </p>
    <p>
      lorem ipsum dolor sit amet, consectetur
    </p>
    <p>
      lorem ipsum dolor sit amet, consectetur
    </p>
    <p>
      lorem ipsum dolor sit amet, consectetur
    </p>
  </div>
</div>

滚动条文本