html&CSS-----background style

Table of contents

Foreword:

It's been a long time since I wrote an article, will you miss me! Today we start to learn the background style and text style of html and CSS. After learning these two styles, you can better decorate your webpage. Let's take a look together.

background style

In fact, we have seen the related attributes of background used many times before. In fact, the background attribute is used to set the background color or background image of the box. background is a composite property. backgorund: color image repeat position/size attachment .

1. Background color background-color

Background color is a very common style, such as background-color: red; see an example below

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <style>
        .violet{
            background-color: blueviolet;
            display: inline-block;
            height: 150px;
        }
    </style>
</head>
<body>
    <div class="violet">
        this a demo
    </div>
</body>
</html>

Effect:

2. Background image background-image

We have learned the img tag before, this tag is used to place pictures, but this picture cannot be used as a background picture, it can only be said to be the content of a label, so the picture in the img tag cannot be used as a background, only It can be regarded as a page loading image.

picture placement

Background images are very common, written as follows: div{ background-image: url("path"); }

How to tile the image

/* case 1 : 背景图片平铺 默认*/
div{ background-repeat: repeat; }

/* case 2 : 背景图片不平铺 */
div{ background-repeat: no-repeat; }

/* case 3 : 背景图片水平平铺 */
div{ background-repeat: repeat-x; }

/* case 4 : 背景图片垂直平铺 */
div{ background-repeat: repeat-y; }

location of the picture

Set the background image position;

background-position:XY; X and Y default: 0 0

The allowed values of X	Values allowed for Y
left left alignment center horizontal center right right alignment	top top alignment center vertical center bottom bottom alignment
percentage	percentage
px	px

If only one value is given, then the second value defaults to center (50%);

If the value of the X-axis and the value of the Y-axis are given as orientation (word) values, the order can be exchanged.

Background weight comparison

Content > Border > Image Background > Background Color

Code example:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <style>
        .violet{
            border: 2px solid red;
            height: 500px;
            background-color: blueviolet;
            font-size: 75px;
            font-family: 华文行楷;
            /* 文字的位置放到中间对齐 */
            text-align: center;
            color: pink;
            background-image: url(../image/OIP-C\ \(1\).jpg);
            /* 背景图片设置为不重复覆盖 */
            background-repeat: no-repeat;
            /* 背景图片位置放到中间 */
            background-position: center;
        }
        .violet .word{
            font-size: 25px;
            font-family: Georgia, 'Times New Roman', Times, serif;
            color: chartreuse;
            margin-top: 150px;
            margin-left: -300px;
        }
        .violet .image{
            margin-left: -400px;
            margin-top: 50px;
        }
    </style>
</head>
<body>
    <div class="violet">
        <div>波奇酱</div>
        <!-- 内容区域 -->
        <div class="word">我是小波奇</div>
        <!-- 这个是显示的图片内容 -->
        <div class="image"><img src="../image/20230714234449.gif" alt="error" width="70px"></div>
    </div>
</body>
</html>

Effect:

That's all for today, see you in the next issue!

Share a wallpaper (Pochi Sauce):