この記事の目標:
1. バックグラウンドオリジンの使い方をマスターする
質問:
1. 以下の効果を実現するには、純粋な DIV CSS を使用してください。背景の原点 background-orgin を使用する必要があります
##追加手順:
1. 各フォト フレームは幅 500 ピクセル、高さ 500 ピクセルです。境界線の幅は 20px、内側のテキスト パディングは 20、境界線のサイズは 20px
2 です。内部の写真は背景画像に従って実装する必要があります
次に、具体的なことを実行しましょう操作
#1. 素材の準備: ルート ディレクトリ 画像フォルダーを作成し、関連するすべての素材画像をここに保存します。
#2.index.html を作成し、アーキテクチャ、アーキテクチャの分析方法を記述します
アイデア分析:
1.ターゲットは上下に分かれており、実際には各部分にフォトフレーム（枠線を含むdiv）の写真が表示されているので、最初の実装が完了していれば2番目の部分をコピーすることが可能です。ただし、よく見ると上の写真と下の写真では表示が少し違っていて、最初のdivの背景画像は枠内、下のdivの背景画像は枠内となっています
3. 各部分は実際には境界線を含む DIV であり、背景画像は写真であり、文字列が含まれており、文字列の上部と下部にはスペースが含まれています
分析によると、次のコードが得られます
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>背景原点制作怀旧照片</title>
</head>
<body>
<div class="container">
<div class="photo xtf">
<div class="content">谢霆锋年轻的样子，一个字帅</div>
</div>
<div class="photo zbz">
<div class="content">张柏芝年轻的样子，一个字美</div>
</div>
</div>
</body>
</html>ログイン後にコピー
3. スタイルを記述し、cssフォルダーを作成し、その中に新しいindex.cssを作成します。内部のスタイルの記述方法は次のとおりです。分析のアイデアは
です。
アイデア分析:
1. .container *
アイデア分析
1.コンテナーのパブリック スタイルにすべての要素を設定するには、次のことができます。これらのパブリック コードを .container * style
に書き込むため、次のコードをindex.css:
.container *{
padding:0;
margin:0;
}ログイン後にコピー
2, .photo photo
1 に追加します。枠線は20pxで点線が表示されます 変換後のコードはborder-width:20px; border-style:dashed; 中の文字にスペースがあるのでpadding:20px、フォントは太字、font-weight:bold、となります。色は白色です:#fff;
全体の幅は 500 なので、width=500-(2 borders 20 20 2 padding20 20)=420、高さも 420 なので、width : 420、高さ: 420
なので、index.css に次のコードを追加します:
.photo {
width:420px;
height: 420px;
border-width:20px;
border-style: dashed;
padding:20px;
font-weight:bold;
color:#fff;
}ログイン後にコピー
3. 最初の写真の設定
この写真の境界線は赤なので、border-color: red;すると、背景はイケメンの写真で、エフェクトから点線の間の色がグレー、つまり#cccであることがわかりますので、background:#ccc url(. ./images/CSS3のBackground-orginでフォトフレームによる写真表示効果を実装 - 事例分析（コード例）) no-repeat; 最も重要なことは、背景画像がパディングから始まることです。ここで、
background-origin を有効にするには、
background で属性 no-repeat
を設定する必要があります。
ということで、index.css に次のコードを追加します:
.xtf{
background:#ccc url(../images/CSS3のBackground-orginでフォトフレームによる写真表示効果を実装 - 事例分析（コード例）) no-repeat;
border-color: red;
background-origin: padding-box;
}ログイン後にコピー
したがって、次のコードをindex.cssに追加します。
.zbz{
background:#ccc url(../images/CSS3のBackground-orginでフォトフレームによる写真表示効果を実装 - 事例分析（コード例）) no-repeat;
background-origin: border-box;
border-color: orange;
}ログイン後にコピー
これまでのところ、全体Index.css の内容は次のとおりです: .container *{
padding:0;
margin:0;
}
.photo {
width:420px;
height: 420px;
border-width:20px;
border-style: dashed;
padding:20px;
font-weight:bold;
color:#fff;
}
.xtf{
background:#ccc url(../images/CSS3のBackground-orginでフォトフレームによる写真表示効果を実装 - 事例分析（コード例）) no-repeat;
border-color: red;
background-origin: padding-box;
}
.zbz{
background:#ccc url(../images/CSS3のBackground-orginでフォトフレームによる写真表示効果を実装 - 事例分析（コード例）) no-repeat;
background-origin: border-box;
border-color: orange;
}ログイン後にコピー
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>背景原点制作怀旧照片</title>
<link href="css/index.css" rel="stylesheet" />
</head>
<body>
<div class="container">
<div class="photo xtf">
<div class="content">谢霆锋年轻的样子，一个字帅</div>
</div>
<div class="photo zbz">
<div class="content">张柏芝年轻的样子，一个字美</div>
</div>
</div>
</body>
</html>ログイン後にコピー
実行時の効果は次のとおりです:##これまでのところ、すべての要件を達成しました実際、background-origin の値は、border-box、padding-box、または content-box に設定できます。背景の原点はコンテンツに基づいています。
ハンサムな男性 Xie の写真設定を変更してみましょう
.xtf{
background:#ccc url(../images/CSS3のBackground-orginでフォトフレームによる写真表示効果を実装 - 事例分析（コード例）) no-repeat;
border-color: red;
background-origin: content-box;/**修改成content-box**/
}ログイン後にコピー
运行结果为：
我们就发现背景图片按照内容为原点显示了
总结：
1、学习了背景原点background-origin的用法，它有3个类型，
一个是border-box:背景图片以边框为起始点
一个是padding-box：背景图片以padding为起始点
一个是content-box：背景图片以内容为起始点
以上がCSS3のBackground-orginでフォトフレームによる写真表示効果を実装 - 事例分析（コード例）の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
