当前位置：首页 > article >正文

css实现图片填充文字

article 2025/1/5 13:55:43

效果

实现

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>图片填充文字示例</title>
  <style>
    body {
      background-color: black;
    }

    h1,
    h3,
    h4 {
      /* 背景填充图片 */
      background-image: url('https://picsum.photos/290/300');
      /* 背景填充文字 */
      background-clip: text;
      /* 兼容性处理 */
      -webkit-background-clip: text;
      /* 文字颜色透明 */
      color: transparent;
    }

    img {
      width: 290px;
      height: 300px;
    }
  </style>
</head>

<body>
  <h1>静夜思</h1>
  <h3>唐·李白</h3>
  <h4>床前明月光，</h4>
  <h4>疑似地上霜。</h4>
  <h4>举头望明月，</h4>
  <h4>低头思故乡。</h4>
  <img src="https://picsum.photos/290/300" alt="">
</body>

</html>

查看全文

http://www.kler.cn/a/461803.html