Cleverly use css to fix the background image in the viewport-Front-end Q&A-php.cn

Cleverly use css to fix the background image in the viewport

醉折花枝作酒筹

Release： 2021-08-12 16:44:50

Original

1788 people have browsed it

In the previous article, we learned about how to set the background of elements, please read "One trick to create colorful backgrounds for CSS elements". This time we will learn how to fix the background image in the viewport. You can refer to it if necessary.

What should we do when we want to fix the background image?

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

Copy after login

The result of this small example is

Cleverly use css to fix the background image in the viewport

We can see that the background of this small example really does not change with the movement of the text Why. After knowing so much, let's take a look at what attributes can be used to set the background to be fixed.

background-attachment Property sets whether the background image is fixed or scrolls with the rest of the page.

This attribute has several values, among which scroll is the default value. means that the background image will move as the rest of the page is scrolled, while fixed means that the background image will not move when the rest of the page is scrolled. There is also a value of local. This key attribute value indicates that the background is fixed relative to the content of the element. If an element has a scrolling mechanism, the background will scroll with the element's content, and the background's drawing area and positioning area will be relative to the scrollable area rather than the border containing them.

Recommended learning: css video tutorial

The above is the detailed content of Cleverly use css to fix the background image in the viewport. For more information, please follow other related articles on the PHP Chinese website!