<!DOCTYPE html>
<html lang="en">
<svg xmlns="https://www.w3.org/2000/svg" style="display: none">
<filter id="grayscale">
<feColorMatrix type="matrix" values="0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0" />
</filter>
</svg>
<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>
/* 页面全部置灰 方式1*/
/* html {
filter: grayscale(0.95);
-webkit-filter: grayscale(0.95);
} */
/* 页面全部置灰 方式2 */
/* html {
filter: url(#grayscale);
} */
/* 首屏置灰 方式1*/
/* html::before {
content: "";
position: absolute;
inset: 0;
backdrop-filter: grayscale(95%);
pointer-events: none;
z-index: 10;
} */
/* 首屏置灰 方式2 */
/* html {
background: #fff;
}
html::before {
content: "";
position: absolute;
inset: 0;
background: rgba(0, 0, 0, 1);
mix-blend-mode: color;
pointer-events: none;
z-index: 10;
} */
/* 除头像外其他的置灰 */
/* :not(:has(.avatar)):not(.avatar) {
filter: grayscale(1);
} */
:not(:has(.avatar)):not(.avatar) {
filter: grayscale(1);
}
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
body {
display: flex;
flex-wrap: wrap;
padding: 6px;
}
.container {
width: 50%;
display: flex;
flex-wrap: wrap;
padding: 5px;
}
.note-info {
width: 200px;
height: 300px;
padding: 8px;
box-shadow: 4px 4px 8px rgb(40 29 29 / 50%);
}
.note-info > div {
margin-bottom: 6px;
}
.note-img-box {
width: 100%;
height: 68%;
border-radius: 4px;
overflow: hidden;
}
.note-txt-box {
width: 100%;
height: 15%;
border: 1px solid sandybrown;
}
.note-txt-box span {
width: 100%;
font-size: 14px;
display: -webkit-box;
text-indent: 2em;
overflow: hidden;
text-overflow: ellipsis;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
}
.note-user {
width: 100%;
height: 15%;
display: flex;
align-items: center;
font-size: 14px;
}
.note-user .avatar-box {
width: 40px;
height: 40px;
border-radius: 50%;
overflow: hidden;
margin-right: 6px;
}
.user-nick i {
float: right;
margin-left: 20px;
color: red;
transition: all 0.5s;
}
.user-nick i:hover {
cursor: default;
transform: rotateY(360deg);
}
img {
width: 100%;
height: 100%;
}
</style>
</head>
<body>
<div class="container">
<div class="note-info">
<div class="note-img-box">
<img src="./images/note-pic.jpg" alt="" />
</div>
<div class="note-txt-box">
<span>新年新气象，新年新希望，平安且健康，诸事顺遂，且行且珍惜！</span>
</div>
<div class="note-user">
<div class="avatar-box">
<img class="avatar" src="./images/avatar.png" alt="" />
</div>
<div class="user-nick">昔冰_G <i>♥</i></div>
</div>
</div>
</div>
<div class="container">
<div class="note-info">
<div class="note-img-box">
<img src="./images/note-pic.jpg" alt="" />
</div>
<div class="note-txt-box">
<span>新年新气象，新年新希望，平安且健康，诸事顺遂，且行且珍惜！</span>
</div>
<div class="note-user">
<div class="avatar-box">
<img class="avatar" src="./images/avatar.png" alt="" />
</div>
<div class="user-nick">昔冰_G <i>♥</i></div>
</div>
</div>
</div>
<div class="container">
<div class="note-info">
<div class="note-img-box">
<img src="./images/note-pic.jpg" alt="" />
</div>
<div class="note-txt-box">
<span>新年新气象，新年新希望，平安且健康，诸事顺遂，且行且珍惜！</span>
</div>
<div class="note-user">
<div class="avatar-box">
<img class="avatar" src="./images/avatar.png" alt="" />
</div>
<div class="user-nick">昔冰_G <i>♥</i></div>
</div>
</div>
</div>
<div class="container">
<div class="note-info">
<div class="note-img-box">
<img src="./images/note-pic.jpg" alt="" />
</div>
<div class="note-txt-box">
<span>新年新气象，新年新希望，平安且健康，诸事顺遂，且行且珍惜！</span>
</div>
<div class="note-user">
<div class="avatar-box">
<img class="avatar" src="./images/avatar.png" alt="" />
</div>
<div class="user-nick">昔冰_G <i>♥</i></div>
</div>
</div>
</div>
<div class="container">
<div class="note-info">
<div class="note-img-box">
<img src="./images/note-pic.jpg" alt="" />
</div>
<div class="note-txt-box">
<span>新年新气象，新年新希望，平安且健康，诸事顺遂，且行且珍惜！</span>
</div>
<div class="note-user">
<div class="avatar-box">
<img class="avatar" src="./images/avatar.png" alt="" />
</div>
<div class="user-nick">昔冰_G <i>♥</i></div>
</div>
</div>
</div>
<div class="container">
<div class="note-info">
<div class="note-img-box">
<img src="./images/note-pic.jpg" alt="" />
</div>
<div class="note-txt-box">
<span>新年新气象，新年新希望，平安且健康，诸事顺遂，且行且珍惜！</span>
</div>
<div class="note-user">
<div class="avatar-box">
<img class="avatar" src="./images/avatar.png" alt="" />
</div>
<div class="user-nick">昔冰_G <i>♥</i></div>
</div>
</div>
</div>
<div class="container">
<div class="note-info">
<div class="note-img-box">
<img src="./images/note-pic.jpg" alt="" />
</div>
<div class="note-txt-box">
<span>新年新气象，新年新希望，平安且健康，诸事顺遂，且行且珍惜！</span>
</div>
<div class="note-user">
<div class="avatar-box">
<img class="avatar" src="./images/avatar.png" alt="" />
</div>
<div class="user-nick">昔冰_G <i>♥</i></div>
</div>
</div>
</div>
<div class="container">
<div class="note-info">
<div class="note-img-box">
<img src="./images/note-pic.jpg" alt="" />
</div>
<div class="note-txt-box">
<span>新年新气象，新年新希望，平安且健康，诸事顺遂，且行且珍惜！</span>
</div>
<div class="note-user">
<div class="avatar-box">
<img class="avatar" src="./images/avatar.png" alt="" />
</div>
<div class="user-nick">昔冰_G <i>♥</i></div>
</div>
</div>
</div>
</body>
</html>
