[关闭]
@Wangww0925 2019-01-18T08:03:55.000000Z 字数 862 阅读 326

文本当背景并且透明模糊化

css

效果

image_1d1fggndmkut1e771um11vhpnf89.png-111kB

代码

  1. <!doctype html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="utf-8">
  5.     <title></title>
  6.     <style>
  7.         *{
  8.             margin: 0;
  9.             padding: 0;
  10.         }
  11.         div:nth-of-type(1){
  12.             width:100%;
  13.             height:450px;
  14.             font-size:25px;
  15.             color:rgba(218,218,218,.9);
  16.             text-shadow: 0px 0px 2px;
  17.             position: absolute;
  18.             left:0px;
  19.             top:50px;
  20.             z-index: 1;
  21.             background: rgba(255,255,255,.1);
  22.         }
  23.     </style>
  24. </head>
  25. <body>
  26.     <!-- 让其背景色为透明色 -->
  27.     <div>
  28.         <pre>
  29.             &lt;!doctype html&gt;
  30.             &lt;html lang="en"&gt;
  31.                 &lt;head&gt;
  32.                     &lt;meta charset="utf-8"&gt;
  33.                     &lt;title&gt;&lt;/title&gt;
  34.                 &lt;/head&gt;
  35.                 &lt;body&gt;
  36.                     Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
  37.                     tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
  38.                     quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
  39.                     consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
  40.                     cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat
  41.                 &lt;/body&gt;
  42.             &lt;/html&gt;
  43.         </pre>
  44.     </div>
  45. </body>
  46. </html>

作者 wendy
2019 年 1月 17日

参考文献

添加新批注
在作者公开此批注前，只有你和作者可见。
回复批注