时间戳

首页 > 解决方案 > 如何制作有照片背景的p文字？

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

问题描述

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

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

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

https://www.apple.com/iphone-xs/

标签： javascripthtmlcss

解决方案

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

'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>

推荐阅读