テキストシェーディング画像を達成するためのHTMLとCSS

効果の最終的な実現を見てください

図ハローテキストの代わりに、画像

それでは、どのようにこの効果を達成していますか？

HTML部分：

H1タグ、ラベルの内容（ハロー）を作成します。リンクタグにより、外部スタイルシートstyle.cssにリンク。

style.cssに一部：

1、統一されたスタイル設定の本体部：

いくつかのマージンとパディングデフォルト体を除去する;太字のフォントを設定し、背景は＃000（黒）です。

2、H1のスタイルを設定します。

テキストのフォントサイズ200pxのを設定します。
カスタムテキストのみ大文字（大文字）、厚さ900; 1pxの文字間隔。
位置＆変換：変換（-50％-50％）が中心ブロック要素の割合を達成しました。
1.JPG背景画像パス、50％の画像の水平スケール、垂直スケールは50％です。
画像の縦横比を維持し、画像が完全にバックグラウンドをカバーするために最小サイズにスケーリングされます。
色指定したテキストを記入し、透明透明;（接頭辞を使用して-webkit-）
（接頭辞を使用-webkit-）、描画領域内の背景指定されたテキスト、テキストが形状に切断

実装コード

HTML部分：

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Awesome Text Effect</title>
 6     <link rel="stylesheet" href="style.css">
 7 </head>
 8 <body>
 9     <h1>hello</h1>
10 </body>
11 </html>

CSS部分：

 1 body{
 2     margin:0px;
 3     padding:0px;
 4     font-family:"黑体";
 5     background:#000; 
 6 }
 7 h1{
 8     font-size: 200px;
 9     text-transform:uppercase;
10     /*定义文本中的大小写，uppercase仅有大写字母 */
11     font-weight: 900;
12     /*定义文本的粗细，从100~900*/
13     letter-spacing:1px;
14     /*设置字母间距*/
15     position:absolute;
16     top:50%;
17     left:50%;
18     transform: translate(-50%, -50%);
19     /*position & transform: translate(-50%, -50%) 
20     实现块元素百分比下居中*/
21     margin:0;
22     background:url(1.jpg) 50% 50%;
23     /*背景图片路径和size大小*/
24     background-size: cover;
25     /*此时会保持图像的纵横比*/
26     /*并将图像缩放成将完全覆盖背景定位区域的最小大小。*/
27     -webkit-text-fill-color:transparent;
28     /*text-fill-color是设置指定文字的填充颜色，transparent透明*/
29     -webkit-background-clip: text;
30     /*背景绘制在text区域内，剪切成文字形状*/
31 }

テキストシェーディング画像を達成するためのHTMLとCSS

おすすめ