如何制作有照片背景的p文字？

Question

我计划在网络上制作一些控制台，但是在设计项目时遇到一些问题。

在“ apple.com（尤其是“ https://www.apple.com/iphone-xs/”））上，有很多文本带有图像而不是背景颜色。我已经分析了该网页，但是找不到如何分配此设计。

我想知道如何分配这样的设计。

Answer 1

为此，您将需要使用背景剪辑属性。

'background-clip'是有关如何裁剪背景的管理。在其中，您可以使用“文本”告诉它剪切文本本身内部提供的背景。

.txt{
    font-size: 40px;
    font-weight: bold;
    color: transparent;
    background-clip: text;
    -webkit-background-clip: text;
    background-image: url(http://ajsai.jp/wp-content/themes/ajsai-theme/images/non-thumbnail.jpg);
  }

  <p class="txt">BACKGROUND!</p>

Answer 2

尝试这个

.text-block {
  background: url(https://www.w3schools.com/howto/img_nature_wide.jpg);
  background-position: center;
  background-size: cover;
  background-clip: text;
  font-size: 5rem;
  color: transparent;
  -webkit-background-clip: text;
}

<p class="text-block">What a beautiful sunrise</p>