This time I will bring you the advanced usage method of cssbackground-attachment, use the background-attachment of cssWhat are the precautions, the following is a practical case, let’s take a look one time.
The premise is to define the background-image attribute, and then use background-attachment to indicate whether the position of the background image is fixed to the viewport or moves with the containing block. It can be simply understood as defining how the background image moves along the scroll axis.
Value:
scroll: Default value, the background image is fixed relative to the element, and the background moves as the page scrolls, that is, the background and content are bound.
fixed: The background image is fixed relative to the viewport, so the background does not move as the page scrolls, which is equivalent to the background being set on the body.
local: The background image is fixed relative to the element content,
inhert: Inherited, nothing to say.
This attribute can be applied to any element.
1. scroll [Background Image Scroll]
Set background-attachment:scroll, the background image is fixed relative to the element itself, and the background image also moves when the content moves. The border attached to the element.
local
Note:
For scroll, the background generally scrolls with the content, but there is an exception.
For scrollable elements (elements set to overflow:scroll). When background-attachment is set to scroll, the background image will not scroll as the element content scrolls.
2. local [scrolling element background image scrolling]
For elements that can be scrolled (elements set to overflow:scroll), set background-attachment:local, the background will scroll as the content scrolls.
Because the background image is positioned relative to the element's own content and is initially fixed, the background image scrolls with the content after the scroll bar appears on the element.
<style> p{ width: 200px; height: 350px; border: 1px solid red; background-image: url(img/img_tree.png); background-repeat: no-repeat; background-attachment: local; overflow: scroll; line-height: 1.5; } </style> <p> 1内容超出会出现滚动条 2内容超出会出现滚动条 3内容超出会出现滚动条 4内容超出会出现滚动条 5内容超出会出现滚动条 6内容超出会出现滚动条 7内容超出会出现滚动条 8内容超出会出现滚动条 9内容超出会出现滚动条 10内容超出会出现滚动条 11内容超出会出现滚动条 12内容超出会出现滚动条 13内容超出会出现滚动条 14内容超出会出现滚动条 15内容超出会出现滚动条 16内容超出会出现滚动条 17内容超出会出现滚动条 18内容超出会出现滚动条 19内容超出会出现滚动条 20内容超出会出现滚动条 </p>
3. Fixed: [Background image is still] The background image is fixed relative to the viewport. Even if the element has a scroll bar, the background image will not follow. Content moves.
fixed usage is as follows:
<style> body{ background-image: url(img/cartooncat.png); background-position: bottom left; background-attachment: fixed; background-repeat: no-repeat; height: 1000px; } </style> <h1 id="下拉看效果">下拉看效果:</h1>
Or look at mozilla’s demo.
I want to emphasize my opinion here:
Set background-attachment: fixed; the effect is the same, relative to the viewport, because a web page There is only one viewport, and the background has nothing to do with the element. The only thing that matters is that if the element is not visible, the background image is not visible.
And what is this viewport? Here is an article recommended "Details of Pixels and Browser Viewports"
4. Multiple background images background-attachment You can also set background-attachment for multiple background images
body { background-image: url("img1.png"), url("img2.png"); background-attachment: scroll, fixed; }
5. Resource links
w3c background-attachment
Details of pixels and browser viewports
a table of two viewports
I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other related articles on the php Chinese website!
Recommended reading:
Detailed explanation of the use of background-attachment in CSS
Bootstrap implementation price list
Detailed explanation of the use of px, em and rem in css
The above is the detailed content of Advanced usage of css background-attachment. For more information, please follow other related articles on the PHP Chinese website!

Who loves charts? Everyone, right? There are lots of ways to create them, including a number of libraries. There’s D3.js, Chart.js, amCharts, Highcharts, and

Third-party cookies are set on your computer from domains other than the one that you're actually on right now. For example, if I log into css-tricks.com,

At a recent conference talk (sorry, I forget which one), there was a quick example of poor web performance in the form of a third-party widget. The example

WebPageTest is an online tool and an Open Source project to help developers audit the performance of their websites. As a Web Performance Evangelist at

Say you have page that has a bunch of transitions and animations on all sorts of elements. Some of them get triggered when the window is resized because they

In this post, we’re going to use CSS superpowers to create a visual effect where two elements overlap and weave together. The epiphany for this design came

CSS allows you to create dynamic layouts and interfaces on the web, but as a language, it is static: once a value is set, it cannot be changed. The idea of

Say you want to have an image (or any other element) visually float left into a paragraph of text. But like... in the middle of the paragraph, not right at


Hot AI Tools

Undresser.AI Undress
AI-powered app for creating realistic nude photos

AI Clothes Remover
Online AI tool for removing clothes from photos.

Undress AI Tool
Undress images for free

Clothoff.io
AI clothes remover

AI Hentai Generator
Generate AI Hentai for free.

Hot Article

Hot Tools

Dreamweaver CS6
Visual web development tools

Safe Exam Browser
Safe Exam Browser is a secure browser environment for taking online exams securely. This software turns any computer into a secure workstation. It controls access to any utility and prevents students from using unauthorized resources.

SublimeText3 Linux new version
SublimeText3 Linux latest version

MantisBT
Mantis is an easy-to-deploy web-based defect tracking tool designed to aid in product defect tracking. It requires PHP, MySQL and a web server. Check out our demo and hosting services.

WebStorm Mac version
Useful JavaScript development tools