One trick to fix the background image of css positioning elements-Front-end Q&A-php.cn

One trick to fix the background image of css positioning elements

醉折花枝作酒筹

Release： 2021-08-13 11:57:56

Original

1646 people have browsed it

In the previous article, we learned how to use the background-origin attribute to position the background image of an element. Please see "One trick to position the background image relative to the origin of css". This time we will learn about the method of positioning the background image of the element. You can refer to it if necessary.

In the previous article, Xiaolizi has this attribute that we are going to introduce. I don’t know if you still remember it. If you don’t remember, go back and take a look. The last article mainly introduced the background-origin attribute, so I didn’t talk about anything else. Today we focus on the background-position attribute.

First let’s look at a little chestnut.

<style>
    div{
      background-image: url("images/3.jpg");
      background-repeat:no-repeat;
      background-position:left;
    }
  </style>
</head>
<body><div>
<p>为了显示，表明这个一个p元素</p>
<p>为了显示，表明这个一个p元素</p>
<p>为了显示，表明这个一个p元素</p>
<p>为了显示，表明这个一个p元素</p>
<p>为了显示，表明这个一个p元素</p>
<p>为了显示，表明这个一个p元素</p>
<p>为了显示，表明这个一个p元素</p>
<p>为了显示，表明这个一个p元素</p>
<p>为了显示，表明这个一个p元素</p>
<p>为了显示，表明这个一个p元素</p>
<p>为了显示，表明这个一个p元素</p>
<p>为了显示，表明这个一个p元素</p>
<p>为了显示，表明这个一个p元素</p>
<p>为了显示，表明这个一个p元素</p>
</div>
</body>

Copy after login

The result of this small example is

One trick to fix the background image of css positioning elements

We can see that when we change "background-position:left;# When the effect of ##" is cancelled, you can find that the background image originally at the bottom suddenly moved to the top. When the effect of "background-position:left;" is checked, the background image returns to its original position. It seems that the background-position attribute is the key to moving the background image, so let’s take a look at this attribute.

The background-position property sets the starting position of the background image. This property sets the position of the background original image (defined by

background-image). If the background image is to be repeated, it will start from this point.

There are a lot of attribute values for this attribute. For everyone’s convenience, I will just post a chart, which you can look at.

One trick to fix the background image of css positioning elements

#Of course, you can write one or two attributes for this attribute.

Recommended learning:

css video tutorial

The above is the detailed content of One trick to fix the background image of css positioning elements. For more information, please follow other related articles on the PHP Chinese website!