zilong/vite-zmusic
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

完美解决歌词渐隐显示

Browse Source
This commit is contained in:
zilong
2021-10-29 21:51:41 +08:00
parent 15d20b8b52
commit 69643be75a
3 changed files with 107 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files

83
public/test.html Normal file
View File

@@ -0,0 +1,83 @@
<!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>