ホームページ > 記事 > ウェブフロントエンド > CSS3のBackground-orginでフォトフレームによる写真表示効果を実装 - 事例分析（コード例）

CSS3のBackground-orginでフォトフレームによる写真表示効果を実装 - 事例分析（コード例）

易达オリジナル: 2020-06-06 11:05:382816ブラウズ

この記事の目標:

1. バックグラウンドオリジンの使い方をマスターする

質問:

1. 以下の効果を実現するには、純粋な DIV CSS を使用してください。背景の原点 background-orgin を使用する必要があります

CSS3のBackground-orginでフォトフレームによる写真表示効果を実装 - 事例分析（コード例）

##追加手順:

1. 各フォトフレームは幅 500 ピクセル、高さ 500 ピクセルです。境界線の幅は 20px、内側のテキストパディングは 20、境界線のサイズは 20px

2 です。内部の写真は背景画像に従って実装する必要があります

次に、具体的なことを実行しましょう操作

#1. 素材の準備: ルートディレクトリ画像フォルダーを作成し、関連するすべての素材画像をここに保存します。

#2.index.html を作成し、アーキテクチャ、アーキテクチャの分析方法を記述します CSS3のBackground-orginでフォトフレームによる写真表示効果を実装 - 事例分析（コード例）

アイデア分析: CSS3のBackground-orginでフォトフレームによる写真表示効果を実装 - 事例分析（コード例）

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;
}

4. 2 枚目の写真の設定この写真の枠線はオレンジ色なので、border-color: orange とします。 ; そして、背景は美しい女性の写真で、効果を見るとわかります点線の間の色は灰色で、これは #ccc なので、background:#ccc url(../images/CSS3のBackground-orginでフォトフレームによる写真表示効果を実装 - 事例分析（コード例）) no-repeat; 最も重要なことは、背景画像が境界線から始まることです。したがって、 ##background-origin: border-box;In order for background-有効にするには、origin を背景に no-repeat 属性を設定する必要があります

したがって、次のコードを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;
}

次に、index.css をindex.html に導入します

<!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**/
}

运行结果为：

CSS3のBackground-orginでフォトフレームによる写真表示効果を実装 - 事例分析（コード例）

我们就发现背景图片按照内容为原点显示了

总结：

1、学习了背景原点background-origin的用法，它有3个类型，

一个是border-box:背景图片以边框为起始点

一个是padding-box：背景图片以padding为起始点

一个是content-box：背景图片以内容为起始点

以上がCSS3のBackground-orginでフォトフレームによる写真表示効果を実装 - 事例分析（コード例）の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明：

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

前の記事：CSS3 の Text-shadow はテキストシャドウ効果を実装します (コード例)次の記事：CSS3 の Text-shadow はテキストシャドウ効果を実装します (コード例)

続きを見る