One trick to fix css relative origin positioning background image-Front-end Q&A-php.cn

One trick to fix css relative origin positioning background image

醉折花枝作酒筹

Release： 2021-08-13 11:32:54

Original

2366 people have browsed it

In the previous article, we learned about how to set a background image for an element. Please see "How to set a background image for an element in css". This time we will learn how to use the background-origin attribute to locate the background image of an element. You can refer to it if necessary.

We mentioned the background-origin attribute in the previous article, but the editor did not mention it. Let’s talk about this attribute this time.

Let’s look at a small example.

  <style>
    div{
      background-image: url("images/2.jpg");
      background-repeat:no-repeat;
      background-position:left;
      background-origin:content-box;
      width: 600px;
      height: 400px;
      border: 2px solid red;
    }
  </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 css relative origin positioning background image

Let’s take a look at this effect. In order to facilitate observation, I use the size of the element The border line is marked, and the red one is the border line of the div element. Something strange happened. Why is my background image not displayed in the upper left corner, but moved downwards? It turns out that it is because of the use of the background-origin attribute.

Let’s take a look at this property.

background-originSpecifies the background relative area of the origin position of the specified background image background-image attribute. This attribute also specifies the position relative to which the background-position attribute is positioned.

It should be noted that:

If the background-attachment attribute of the background image is "fixed", this attribute has no effect.

Look at the syntax of this attribute.

background-origin: padding-box|border-box|content-box;

Copy after login

Padding-box represents the positioning of the background image relative to the padding box; border-box represents the positioning of the background image relative to the border box; content-box represents the background The image is positioned relative to the content box.

Recommended learning: css video tutorial

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