ホームページ > 記事 > ウェブフロントエンド > CSS を使用して HTML フォントに背景画像を追加する方法を教える 1 つのトリック (コード共有)
前回の記事「cssを使ってHTMLフォントに枠線効果を追加する方法をステップバイステップで教えます(コード共有)」では、cssを使って枠線効果を追加する方法を紹介しました。 HTMLフォントに。 CSSを使ってHTMLフォントに背景画像を追加する方法を次の記事で紹介していますので、一緒に見ていきましょう。
#まずは最終的なエフェクトを見てみましょう
追加方法フォントの背景画像? 1. HTML を開くときは、まず div タグを記述します。 と の間に、コード<!DOCTYPE html> <html> <head> <title>给字体添加图片</title> </head> <body> <div>时间也抛弃他</1div> </body> </html>コードの効果 コード出力結果、フォントが小さすぎる、フォントを大きくしたい、どうやって拡大するのですか? font-family 属性を使用して、テキストのフォント スタイルを設定します。コード例
<style type="text/css"> * { font-family: fantasy; font-size: 2em; }コードを忘れずに記述してください。効果 コード出力結果が表示されました。フォントに背景画像を追加するにはどうすればよいですか?動作を確認するには、background: url() を使用してみてください。
div { background: url(3.jpg); }コードのレンダリング
その結果、サイズ変更が機能しません。テキストのサイズが変わったらどうすればよいですか? div ボックスのサイズ (幅と高さ) を使用できます。コード例
div { height:180px; width:710px; }コードの効果 テキストのサイズの効果により、これは単に div ボックスに背景画像を追加するだけで、フォントに背景画像が追加されないことがわかりました。スタイルを設定する属性 background-origin がありません (コード例)。
background-origin: border-box; -webkit-background-clip: text; -webkit-text-fill-color: transparent;エフェクト画像
##OK、完了です~
完全なコード
给字体添加图片 <style type="text/css"> * { font-family: fantasy; font-size: 2em; } div { height:180px; width:710px; background: url(3.jpg) no-repeat; background-origin: border-box; -webkit-background-clip: text; -webkit-text-fill-color: transparent; }时间也抛弃他1div> 背景-由来どういう意味ですか?みんなに説明することで。
background-origincss の
属性は、コンテンツ ボックスの配置背景画像を参照します。値は 3 つあります。3 つの値とは何ですか?
border-box 境界ボックスpadding-box パディング ボックス
content-box コンテンツ ボックス
文法コードbackground-origin: padding-box; background-origin: border-box; background-origin: content-box;推奨学習:
CSS ビデオチュートリアル######以上がCSS を使用して HTML フォントに背景画像を追加する方法を教える 1 つのトリック (コード共有)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
声明:この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。