The use and definition of css background-attachment attribute
background-attachment -- Define how the background image moves with the scroll axis
Value: scroll | fixed | inherit
scroll: As the page scrolls The axis background image will move
fixed: The axis background image will not move as the page scrolls
inherit: Inherit
Initial value: scroll
Inheritance: No
Applies to: all elements
background: background.attachment: attachment.
Example
body
{
background-image:url('list-orange.png');
background-attachment:fixed;
background-repeat:repeat-x;
background-position:center center;
}The background image of the screen is An orange line. As the scroll axis moves, the visual position of the orange line remains unchanged.
CSS background-attachment property example--You can try editing
CSS background-attachment property example
Parallax Scrolling refers to making multi-layer backgrounds move at different speeds to form a three-dimensional motion effect and bring an excellent visual experience. As a hot trend in web design this year, more and more websites have applied this technology.
If you don’t understand, you can first take a look at the effect on eBay: http://www.ebay.com/new/
In fact, it is to fix the background and not let it move with the scroll axis, but The container containing the background is scrolled, causing a visual difference that appears to be the same as switching scenes. (Don’t let this explanation be too confusing...)
The attribute that defines the background scrolling method in CSS is background-attachment
background-attachment -- defines the way the background image moves with the scroll axis
Values: scroll | fixed | inherit
scroll: Default value. Background image will move as the rest of the page scrolls.
fixed: The background image does not move when the rest of the page scrolls.
inherit: Specifies that the setting of the background-attachment attribute should be inherited from the parent element.
Initial value: scroll
Inheritance: No
Applies to: all elements
Browser support:
It has been tested on chrome, opera, safari, firefox, and ie7-8, so it means that it does not work under IE6~
To use this attribute under IE6, you need to place background-attachment:fixed in the body Or in html, that is to say, it is useless in other tags. The effect you can see in the w3c above is because it is placed in the body.
This is a demo I made myself, click to download
Code:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>滚动视觉差示例</title>
<style>
*{
padding:0;
margin:0
}
body{
text-align:center;
background-attachment:fixed;
}
#main{
width: 1280px;
margin:auto
}
.header{
background:#fff;
padding: 10px 0
}
.bg-attachment{
background:url(6.jpg) center center no-repeat;
box-shadow:0 7px 18px #000000 inset,0 -7px 18px #000000 inset;
-webkit-box-shadow:0 7px 18px #000000 inset,0 -7px 18px #000000 inset;
-moz-box-shadow: 0 7px 18px #000000 inset,0 -7px 18px #000000 inset;
-o-box-shadow: 0 7px 18px #000000 inset,0 -7px 18px #000000 inset;
-ms-box-shadow: 0 7px 18px #000000 inset,0 -7px 18px #000000 inset;
background-attachment:fixed;
}
.bg-attachment .shadow{
width:80%;
height:700px;
overflow:hidden;
margin:auto;
}
.div2{
background:url(qingz.jpg) center center no-repeat;
background-attachment:fixed;
}
</style>
</head>
<body>
<div id="main">
<div class="header">
<img src="/static/imghwm/default1.png" data-src="5.jpg" class="lazy" alt="The use and definition of css background-attachment attribute" >
</div>
<div class="bg-attachment">
<div class="shadow"></div>
</div>
<div class="header">
<img src="/static/imghwm/default1.png" data-src="qi.jpg" class="lazy" alt="The use and definition of css background-attachment attribute" >
</div>
<div class="bg-attachment div2">
<div class="shadow"></div>
</div>
</div>
</body>
</html>The above is the detailed content of The use and definition of css background-attachment attribute. For more information, please follow other related articles on the PHP Chinese website!
Simulating Mouse MovementApr 22, 2025 am 11:45 AMIf you've ever had to display an interactive animation during a live talk or a class, then you may know that it's not always easy to interact with your slides
Powering Search With Astro Actions and Fuse.jsApr 22, 2025 am 11:41 AMWith Astro, we can generate most of our site during our build, but have a small bit of server-side code that can handle search functionality using something like Fuse.js. In this demo, we’ll use Fuse to search through a set of personal “bookmarks” th
Undefined: The Third Boolean ValueApr 22, 2025 am 11:38 AMI wanted to implement a notification message in one of my projects, similar to what you’d see in Google Docs while a document is saving. In other words, a
In Defense of the Ternary StatementApr 22, 2025 am 11:25 AMSome months ago I was on Hacker News (as one does) and I ran across a (now deleted) article about not using if statements. If you’re new to this idea (like I
Using the Web Speech API for Multilingual TranslationsApr 22, 2025 am 11:23 AMSince the early days of science fiction, we have fantasized about machines that talk to us. Today it is commonplace. Even so, the technology for making
Jetpack Gutenberg BlocksApr 22, 2025 am 11:20 AMI remember when Gutenberg was released into core, because I was at WordCamp US that day. A number of months have gone by now, so I imagine more and more of us
Creating a Reusable Pagination Component in VueApr 22, 2025 am 11:17 AMThe idea behind most of web applications is to fetch data from the database and present it to the user in the best possible way. When we deal with data there
Using 'box shadows' and clip-path togetherApr 22, 2025 am 11:13 AMLet's do a little step-by-step of a situation where you can't quite do what seems to make sense, but you can still get it done with CSS trickery. In this
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
Video Face Swap
Swap faces in any video effortlessly with our completely free AI face swap tool!
Hot Article
Hot Tools
SublimeText3 English version
Recommended: Win version, supports code prompts!
mPDF
mPDF is a PHP library that can generate PDF files from UTF-8 encoded HTML. The original author, Ian Back, wrote mPDF to output PDF files "on the fly" from his website and handle different languages. It is slower than original scripts like HTML2FPDF and produces larger files when using Unicode fonts, but supports CSS styles etc. and has a lot of enhancements. Supports almost all languages, including RTL (Arabic and Hebrew) and CJK (Chinese, Japanese and Korean). Supports nested block-level elements (such as P, DIV),
SublimeText3 Mac version
God-level code editing software (SublimeText3)
MinGW - Minimalist GNU for Windows
This project is in the process of being migrated to osdn.net/projects/mingw, you can continue to follow us there. MinGW: A native Windows port of the GNU Compiler Collection (GCC), freely distributable import libraries and header files for building native Windows applications; includes extensions to the MSVC runtime to support C99 functionality. All MinGW software can run on 64-bit Windows platforms.
Atom editor mac version download
The most popular open source editor
