文字遮挡轮廓效果

by yelog yelog

HTML

<html>
    <head><title>test</title></head>
    <body>
        <div class='head'>
            this is head
        </div>
        <pre class='content'>
             赠裴十迪

王维王维〔唐代〕

风景日夕佳，与君赋新诗。
澹然望远空，如意方支颐。
春风动百草，兰蕙生我篱。
暧暧日暖闺，田家来致词。
欣欣春还皋，淡淡水生陂。
桃李虽未开，荑萼满芳枝。
请君理还策，敢告将农时。






关关雎鸠，在河之洲。窈窕淑女，君子好逑。参差荇菜，左右流之。窈窕淑女，寤寐求之。求之不得，寤寐思服。悠哉悠哉，辗转反侧。参差荇菜，左右采之。窈窕淑女，琴瑟友之。参差荇菜，左右芼之。窈窕淑女，钟鼓乐之。——先秦·诗经·国风·周南《关雎》https://www.gushiwen.cn/shiwenv_4c5705b99143.aspx
背诵拼音赏析注释译文
关雎
诗经·国风·周南〔先秦〕

关关雎鸠，在河之洲。窈窕淑女，君子好逑。
参差荇菜，左右流之。窈窕淑女，寤寐求之。
求之不得，寤寐思服。悠哉悠哉，辗转反侧。
参差荇菜，左右采之。窈窕淑女，琴瑟友之。
参差荇菜，左右芼之。窈窕淑女，钟鼓乐之。





将进酒

李白李白〔唐代〕

君不见黄河之水天上来，奔流到海不复回。
君不见高堂明镜悲白发，朝如青丝暮成雪。
人生得意须尽欢，莫使金樽空对月。
天生我材必有用，千金散尽还复来。
烹羊宰牛且为乐，会须一饮三百杯。
岑夫子，丹丘生，将进酒，杯莫停。
与君歌一曲，请君为我倾耳听。(倾耳听 一作：侧耳听)
钟鼓馔玉不足贵，但愿长醉不愿醒。(不足贵 一作：何足贵；不愿醒 一作：不复醒)
古来圣贤皆寂寞，惟有饮者留其名。(古来 一作：自古；惟 通：唯)
陈王昔时宴平乐，斗酒十千恣欢谑。
主人何为言少钱，径须沽取对君酌。
五花马、千金裘，呼儿将出换美酒，与尔同销万古愁。
        </pre>
    </body>
</html>

CSS

body,html {
    background: white;
    font-size: 30px;
}

.head {
    /* 关键样式 */
    background-color: transparent;
    background-image: radial-gradient(transparent 1px, #ffffff 1px);
    background-size: 4px 4px;
    backdrop-filter: saturate(50%) blur(4px);
    /* 这个只是固定在页面上面 */
    top: 0;
    height: 100px;
    width: 100%;
    position: fixed;
    border-bottom: 1px gray solid;
}

.content {
    padding-top: 100px;
    overflow-y: auto;
}