84 lines
2.7 KiB
HTML
84 lines
2.7 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8" />
|
|
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
|
|
<meta
|
|
name="viewport"
|
|
content="width=device-width, initial-scale=1.0"
|
|
/>
|
|
<title>测试网页</title>
|
|
<style>
|
|
body {
|
|
/* background-color: rgba(244, 244, 244, 1); */
|
|
background-color: rgba(233, 233, 233, 1);
|
|
}
|
|
.content {
|
|
margin: 2em;
|
|
height: 200px;
|
|
overflow-y: auto;
|
|
/* background-image: linear-gradient(
|
|
rgba(255, 255, 255, 0),
|
|
rgb(255, 255, 255, 1)
|
|
); */
|
|
/* background-color: rgba(233, 233, 233, 1); */
|
|
|
|
/* -webkit-mask-image: -webkit-gradient(
|
|
linear,
|
|
left 90%,
|
|
left bottom,
|
|
from(rgba(0, 0, 0, 1)),
|
|
to(rgba(0, 0, 0, 0))
|
|
); */
|
|
|
|
-webkit-mask-image: linear-gradient(
|
|
to bottom,
|
|
rgba(0, 0, 0, 0) 0,
|
|
rgba(0, 0, 0, 1) 20%,
|
|
rgba(0, 0, 0, 1) 80%,
|
|
rgba(0, 0, 0, 0) 100%
|
|
);
|
|
mask-image: linear-gradient(
|
|
to bottom,
|
|
rgba(0, 0, 0, 0),
|
|
rgba(0, 0, 0, 1)
|
|
);
|
|
|
|
/* background-image: linear-gradient(
|
|
to bottom,
|
|
rgba(0, 0, 0, 1) 0%,
|
|
rgba(0, 0, 0, 0) 30%,
|
|
rgba(0, 0, 0, 0.4) 10%,
|
|
rgba(0, 0, 0, 0.6) 40%,
|
|
rgba(0, 0, 0, 0) 70%,
|
|
rgba(0, 0, 0, 1) 100%
|
|
); */
|
|
}
|
|
.lyric-line {
|
|
/* mix-blend-mode: overlay; */
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div style="background-color: #eee">asdfladjflsdfsdlf</div>
|
|
<div class="content">
|
|
<div class="lyric-line">一句歌词，哈哈</div>
|
|
<div class="lyric-line">一句歌词，哈歌词歌词哈</div>
|
|
<div class="lyric-line">一句歌歌词歌词词，哈哈</div>
|
|
<div class="lyric-line">一句歌词，哈哈</div>
|
|
<div class="lyric-line">一句歌词，哈哈</div>
|
|
<div class="lyric-line">一句歌词，哈歌词歌词歌词哈</div>
|
|
<div class="lyric-line">一句歌词，哈哈</div>
|
|
<div class="lyric-line">一句歌歌词词，哈哈</div>
|
|
<div class="lyric-line">一句歌词，哈哈</div>
|
|
<div class="lyric-line">一句歌歌词歌词歌词词，哈哈</div>
|
|
<div class="lyric-line">一句歌歌词歌词词，哈哈</div>
|
|
<div class="lyric-line">一句歌词，哈哈</div>
|
|
<div class="lyric-line">一句歌歌词歌词词，哈哈</div>
|
|
<div class="lyric-line">一句歌词，哈歌词歌词歌词歌词哈</div>
|
|
<div class="lyric-line">一句歌词，哈哈</div>
|
|
<div class="lyric-line">一句歌歌词歌词歌词词，哈哈</div>
|
|
</div>
|
|
</body>
|
|
</html>
|