css3の背景-学習記録11

記事のディレクトリ

背景色

 background-color:颜色值;

通常の状況では、要素の背景色のデフォルト値は透明（透明）です。手動で背景色を透明として指定することもできます。

背景画像

background-image属性は、要素の背景画像を記述します。実際の現像は、ロゴや装飾的な小さな写真や大きな背景写真でよく使用されます。利点は、位置を非常に簡単に制御できることです（スピリット写真もアプリケーションシナリオです）。

background-image : none | url (url)

ここに画像の説明を挿入

背景-繰り返し

background-repeat: repeat | no-repeat | repeat-x | repeat-y

ここに画像の説明を挿入

背景位置

background-positionプロパティを使用して、背景の画像の位置を変更します。

 background-position: x  y;

パラメータの意味は次のとおりです。x座標とy座標。名詞または正確な単位を使用できます
ここに画像の説明を挿入

パラメータは位置名詞です

指定された2つの値が両方とも位置名詞である場合、2つの値の順序は関係ありません。たとえば、左上と左上は同じ効果があります。
1つの位置名詞のみが指定され、他の値が省略されている場合、2番目の値はデフォルトで中央に配置されます

パラメータは正確な単位です

パラメータ値が正確な座標である場合、最初の値はx座標であり、2番目の値はy座標である必要があります
1つの値のみを指定する場合、その値はx座標である必要があり、もう1つの値はデフォルトで垂直方向の中央に配置されます。

パラメータは混合単位です

指定された2つの値が正確な単位と名詞の混合である場合、最初の値はx座標であり、2番目の値はy座標です

ケースナンバーワン

キンググローリーのホームページを開き、背景画像で「グロースガーディアンプラットフォーム」を描きます
ここに画像の説明を挿入

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    h3 {
     
     
        font-size: 14px;
        line-height: 40px;
        width: 150px;
        height: 40px;
        text-indent: 4em;
        background-image: url(image.png);
        background-repeat: no-repeat;
        background-position: left center;
    }
</style>

<body>
    <h3>成长守护平台</h3>
</body>

</html>

効果：
ここに画像の説明を挿入
ソースコードからクロールされた画像はここでは少し魅力的であるため、emmmはインターフェイス上の画像とは異なる場合があります

背景-添付ファイル

background-attachmentプロパティは、背景画像を固定するか、ページの残りの部分と一緒にスクロールするかを設定します。
背景アタッチメントは、後で視差スクロールの効果を生み出すことができます。
ここに画像の説明を挿入

背景構成

backgroundプロパティのコードを簡略化するために、これらのプロパティを組み合わせて、同じプロパティbackgroundで省略できます。これにより、コードの量を節約できます。
省略された属性を使用する場合、特定の書き込み順序はありません。一般的な規則は次のとおりです。
背景：背景色背景画像アドレス背景タイル背景画像スクロール背景画像位置。

 background: transparent url(image.jpg) repeat-y  fixed  top ;

背景色半透明

background: rgba(0, 0, 0, 0.3);

最後のパラメータはアルファ透明度で、値の範囲は0〜1です。
0.3の0を省略し、背景として書き込むために使用されます。rgba（0、0、0、.3）;
注：半透明の背景とは、ボックスの背景が半透明であり、ボックス内のコンテンツが影響を受けないことを意味します
CSS3の新しいプロパティは、IE9 +ブラウザでのみサポートされています
しかし、実際の開発では、互換性の記述にはあまり注意を払っていないので、安心して使用できます。

総括する

ここに画像の説明を挿入
背景画像：実際の現像は、ロゴや装飾的な小さな画像や大きな背景画像でよく見られます。利点は、位置の制御が非常に簡単なことです（スピリット画像もアプリケーションシナリオです）。

ケース2-カラフルなナビゲーションバー

目標：
マウスをクリックすると、ナビゲーションバーの色も変わります
ここに画像の説明を挿入

手順：
1。これはリンクaであるため、インライン要素ですが、サイズを変更して行に配置する必要があるため、display:inline-block
2を使用します。内部のテキストは水平方向（text-align）および垂直方向（setしたがって、1行のテキストを垂直方向に中央揃えにするコード
が必要です。3。リンクに背景画像を設定する必要があるため、背景の関連プロパティ設定を使用する必要があります
。4。背景画像はマウスで変更されるため、リンク疑似クラスセレクターが必要です。

ここで怠惰になり、最初のものを作りました：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    .nav a{
     
     
        display: inline-block;
        width: 120px;
        height: 58px;
        background-color: pink;
        text-align: center;
        line-height: 50px;
        text-decoration: none;
        color: white;
    }
    .nav .pic1{
     
     
        background: url(picture1.png) no-repeat;
    }

    .nav .pic1:hover{
     
     
        background: url(picture2.png) no-repeat;
    }
</style>
<body>
    <div class="nav">
        <a href="#" class="pic1">彩色导航</a>
        <a href="#">彩色导航</a>
        <a href="#">彩色导航</a>
        <a href="#">彩色导航</a>
        <a href="#">彩色导航</a>
    </div>
</body>
</html>

効果：
ここに画像の説明を挿入
マウスをナビゲーションバーの上に置くと、色が変わります（スクリーンショットを撮ることはできません）