92 lines
2.8 KiB
HTML
92 lines
2.8 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">
|
||
测试啊哈哈，安居客圣诞节疯狂大水井坊
|
||
<div>
|
||
啊啊啊啊啊啊啊
|
||
<div>
|
||
bbbbbbbbbbbbbb
|
||
</div>
|
||
</div>
|
||
</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>
|