[CSS] background

7863 ワード
CSS テキストリンク 
<!DOCTYPE html>
<html>
    <head>
        <style>
            div{
                border: 5px solid gray;
                background-color: blueviolet;
                background-image: url(5-6.\ img\ file.PNG);
                font-size: 100px;
            }
        </style>
    </head>
    <body>
        <div>
            Hello github
        </div>
    </body>
</html>
結果
  • background-color: blueviolet;およびbackground-image: url(5-6.\ img\ file.PNG);を併用することができる.色は見えませんが、透明な画像で色も見えます.
    • <!DOCTYPE html>
<html>
    <head>
        <style>
            div{
                border: 5px solid gray;
                background-color: blueviolet;
                background-image: url(5-6.\ img\ file.PNG);
                font-size: 100px;
                background-repeat: no-repeat;
                background-attachment: fixed;
            }
        </style>
    </head>
    <body>
        <div>
            Hello github<br>Hello github<br>Hello github<br>Hello github<br>Hello github<br>Hello github<br>Hello github<br>Hello github<br>Hello github<br>
        </div>
    </body>
</html>
    結果
  • background-repeat: no-repeat;重複画像を避ける
  • background-attachment: fixed;で画像を固定します.スクロールしても位置が固定されます.
  • background-size: contain;を追加すると、画像はウィンドウサイズに応じて移動します.
  • background-position: center center;を真ん中にします.
    • 背景にはサムネイルもあります.
    JS:約束とは何ですか.
    Cでの名前空間