image_long_text.html 3.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111
  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  3. <head>
  4. <meta charset="UTF-8">
  5. <meta name="template:media-width" content="1024">
  6. <meta name="template:media-height" content="1024">
  7. <meta name="viewport" content="width=1080, height=1920">
  8. <title>长文本 - 1080x1920</title>
  9. <!-- Google Fonts - 中文字体 -->
  10. <link rel="preconnect" href="https://fonts.googleapis.com">
  11. <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  12. <link href="https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@400;700;900&family=Noto+Serif+SC:wght@400&display=swap" rel="stylesheet">
  13. <style>
  14. * { margin: 0; padding: 0; box-sizing: border-box; }
  15. html, body { width: 1080px; height: 1920px; overflow: hidden; }
  16. body {
  17. font-family: 'Noto Sans SC', 'PingFang SC', 'Source Han Sans', 'Microsoft YaHei', -apple-system, BlinkMacSystemFont, sans-serif;
  18. color: #000;
  19. position: relative;
  20. background: #e8e8e8;
  21. background-image: url("{{image}}");
  22. background-size: cover;
  23. background-position: center;
  24. /* 背景模糊效果 */
  25. display: flex;
  26. flex-direction: column;
  27. align-items: center;
  28. padding: 0 60px;
  29. }
  30. /* 背景遮罩层 */
  31. body::before {
  32. content: '';
  33. position: absolute;
  34. inset: 0;
  35. background: rgba(220, 220, 220, 0.75);
  36. backdrop-filter: blur(8px);
  37. -webkit-backdrop-filter: blur(8px);
  38. z-index: 0;
  39. }
  40. /* 顶部标题 */
  41. .title {
  42. position: relative;
  43. z-index: 1;
  44. font-size: 110px;
  45. font-weight: 900;
  46. line-height: 1.2;
  47. font-family: 'Noto Sans SC', sans-serif;
  48. color: #000;
  49. letter-spacing: 0;
  50. text-align: center;
  51. margin-top: 80px;
  52. margin-bottom: 100px;
  53. /* 白色描边 */
  54. text-shadow: -2px -2px 0 #fff,
  55. 2px -2px 0 #fff,
  56. -2px 2px 0 #fff,
  57. 2px 2px 0 #fff;
  58. }
  59. /* 正文区域 */
  60. .content {
  61. width: 100%;
  62. position: relative;
  63. z-index: 1;
  64. font-size: 56px;
  65. font-weight: 400;
  66. line-height: 4;
  67. font-family: 'Noto Sans SC', 'Noto Serif SC', serif;
  68. color: #000;
  69. text-align: center;
  70. letter-spacing: 0.5px;
  71. /* 白色描边 */
  72. text-shadow: -1px -1px 0 #fff,
  73. 1px -1px 0 #fff,
  74. -1px 1px 0 #fff,
  75. 1px 1px 0 #fff;
  76. /* 保留换行符 */
  77. white-space: pre-line;
  78. }
  79. .content p {
  80. margin-bottom: 0;
  81. }
  82. .author {
  83. position: absolute;
  84. font-size: 24px;
  85. font-family: 'Liu Jian Mao Cao', 'ZCOOL KuaiLe', cursive;
  86. color: #333;
  87. bottom: 20px;
  88. left: 50%;
  89. transform: translateX(-50%);
  90. }
  91. </style>
  92. </head>
  93. <body>
  94. <!-- 标题 -->
  95. <div class="title">{{title}}</div>
  96. <!-- 正文 -->
  97. <div class="content">{{text}}</div>
  98. <!-- 作者 -->
  99. <div class="author">{{author=@Pixelle.AI}}</div>
  100. </body>
  101. </html>