CSS中的属性background-attachment属性用于指定背景图像相对于其容器的附着类型。可以将其设置为滚动或保持固定。它可以应用于所有HTML元素。
用法:
background-attachment:scroll|fixed|local|initial|inherit;
属性：
scroll:它将背景图像设置为相对于包含元素固定在其位置，并随页面滚动。它是默认值。
- 用法：
background-attachment:scroll;
- Example:
<!DOCTYPE html> <html> <head> <title> background-attachment property </title> <style> #example { background-image: url("https://media.geeksforgeeks.org/wp-content/uploads/geeks-25.png"); background-position:center; background-repeat:no-repeat; background-attachment:fixed; } </style> </head> <body style = "text-align:center"> <h1>GeeksforGeeks</h1> <h2> background-attachment:scroll;</h2><br><br> <div id="example"> <p> Prepare for the Recruitment drive of product based companies like Microsoft, Amazon, Adobe etc with a free online placement preparation course. The course focuses on various MCQ's & Coding question likely to be asked in the interviews & make your upcoming placement season efficient and successful. </p> <br> <br> <br> <p> This course is especially designed for the Java apprentices who want to hone their skills in Java for Coding Interviews and Competitive Programming. No matter if you are a school student or college student, if you have the zeal of programming, this is the right time to start. </p> <br> <br> <br> <p> Prepare for the Recruitment drive of product based companies like Microsoft, Amazon, Adobe etc with a free online placement preparation course. The course focuses on various MCQ's & Coding question likely to be asked in the interviews & make your upcoming placement season efficient and successful </p> <br> <br> <br> <p> This course is especially designed for the Java apprentices who want to hone their skills in Java for Coding Interviews and Competitive Programming. No matter if you are a school student or college student, if you have the zeal of programming, this is the right time to start. </p> <br> <br> <br> <p> Prepare for the Recruitment drive of product based companies like Microsoft, Amazon, Adobe etc with a free online placement preparation course. The course focuses on various MCQ's & Coding question likely to be asked in the interviews & make your upcoming placement season efficient and successful </p> </div> </body> </html> - Output:
fixed：此属性用于将背景图像设置为相对于视口的固定位置。
- 用法:
background-attachment:fixed;
- 例：
<!DOCTYPE html> <html> <head> <title> background-attachment property </title> <style> #example { background-image: url("https://media.geeksforgeeks.org/wp-content/uploads/geeks-25.png"); background-position:center; background-repeat:no-repeat; background-attachment:fixed; } </style> </head> <body style = "text-align:center"> <h1>GeeksforGeeks</h1> <h2> background-attachment:fixed;</h2><br><br> <div id="example"> <p> Prepare for the Recruitment drive of product based companies like Microsoft, Amazon, Adobe etc with a free online placement preparation course. The course focuses on various MCQ's & Coding question likely to be asked in the interviews & make your upcoming placement season efficient and successful. </p> <br> <br> <br> <p> This course is especially designed for the Java apprentices who want to hone their skills in Java for Coding Interviews and Competitive Programming. No matter if you are a school student or college student, if you have the zeal of programming, this is the right time to start. </p> <br> <br> <br> <p> Prepare for the Recruitment drive of product based companies like Microsoft, Amazon, Adobe etc with a free online placement preparation course. The course focuses on various MCQ's & Coding question likely to be asked in the interviews & make your upcoming placement season efficient and successful </p> <br> <br> <br> <p> This course is especially designed for the Java apprentices who want to hone their skills in Java for Coding Interviews and Competitive Programming. No matter if you are a school student or college student, if you have the zeal of programming, this is the right time to start. </p> <br> <br> <br> <p> Prepare for the Recruitment drive of product based companies like Microsoft, Amazon, Adobe etc with a free online placement preparation course. The course focuses on various MCQ's & Coding question likely to be asked in the interviews & make your upcoming placement season efficient and successful </p> </div> </body> </html> - 输出：
local：此属性用于将背景图像及其容器元素而不是页面的内容一起滚动。
- 用法:
background-attachment:local;
- 例：
<!DOCTYPE html> <html> <head> <title> background-attachment property </title> <style> #example { background-image: url("https://media.geeksforgeeks.org/wp-content/uploads/geeks-25.png"); background-position:center; background-repeat:no-repeat; background-attachment:local; } </style> </head> <body style = "text-align:center"> <h1>GeeksforGeeks</h1> <h2> background-attachment:local;</h2><br><br> <div id="example"> <p> Prepare for the Recruitment drive of product based companies like Microsoft, Amazon, Adobe etc with a free online placement preparation course. The course focuses on various MCQ's & Coding question likely to be asked in the interviews & make your upcoming placement season efficient and successful. </p> <br> <br> <br> <p> This course is especially designed for the Java apprentices who want to hone their skills in Java for Coding Interviews and Competitive Programming. No matter if you are a school student or college student, if you have the zeal of programming, this is the right time to start. </p> <br> <br> <br> <p> Prepare for the Recruitment drive of product based companies like Microsoft, Amazon, Adobe etc with a free online placement preparation course. The course focuses on various MCQ's & Coding question likely to be asked in the interviews & make your upcoming placement season efficient and successful </p> <br> <br> <br> <p> This course is especially designed for the Java apprentices who want to hone their skills in Java for Coding Interviews and Competitive Programming. No matter if you are a school student or college student, if you have the zeal of programming, this is the right time to start. </p> <br> <br> <br> <p> Prepare for the Recruitment drive of product based companies like Microsoft, Amazon, Adobe etc with a free online placement preparation course. The course focuses on various MCQ's & Coding question likely to be asked in the interviews & make your upcoming placement season efficient and successful </p> </div> </body> </html> - 输出：
initial：用于将background-attachment属性设置为其默认值。
- 用法:
background-attachment:initial;
- 例：
<!DOCTYPE html> <html> <head> <title> background-attachment property </title> <style> #example { background-image: url("https://media.geeksforgeeks.org/wp-content/uploads/geeks-25.png"); background-position:center; background-repeat:no-repeat; background-attachment:initial; } </style> </head> <body style = "text-align:center"> <h1>GeeksforGeeks</h1> <h2> background-attachment:initial;</h2><br><br> <div id="example"> <p> Prepare for the Recruitment drive of product based companies like Microsoft, Amazon, Adobe etc with a free online placement preparation course. The course focuses on various MCQ's & Coding question likely to be asked in the interviews & make your upcoming placement season efficient and successful. </p> <br> <br> <br> <p> This course is especially designed for the Java apprentices who want to hone their skills in Java for Coding Interviews and Competitive Programming. No matter if you are a school student or college student, if you have the zeal of programming, this is the right time to start. </p> <br> <br> <br> <p> Prepare for the Recruitment drive of product based companies like Microsoft, Amazon, Adobe etc with a free online placement preparation course. The course focuses on various MCQ's & Coding question likely to be asked in the interviews & make your upcoming placement season efficient and successful </p> <br> <br> <br> <p> This course is especially designed for the Java apprentices who want to hone their skills in Java for Coding Interviews and Competitive Programming. No matter if you are a school student or college student, if you have the zeal of programming, this is the right time to start. </p> <br> <br> <br> <p> Prepare for the Recruitment drive of product based companies like Microsoft, Amazon, Adobe etc with a free online placement preparation course. The course focuses on various MCQ's & Coding question likely to be asked in the interviews & make your upcoming placement season efficient and successful </p> </div> </body> </html> - 输出：
继承：用于从其父元素设置属性。
支持的浏览器：下面列出了background-attachment属性支持的浏览器：
- 谷歌浏览器1.0
- Internet Explorer 4.0
- Firefox 1.0
- Opera 3.5
- Safari 1.0
相关用法
- HTML Style backgroundAttachment用法及代码示例
- CSS transition-property用法及代码示例
- CSS nav-down用法及代码示例
- CSS nav-up用法及代码示例
- CSS top属性用法及代码示例
- CSS all属性用法及代码示例
- CSS right属性用法及代码示例
- CSS nav-right用法及代码示例
- CSS columns属性用法及代码示例
- CSS zoom属性用法及代码示例
- CSS nav-left用法及代码示例
- CSS resize属性用法及代码示例
- CSS will-change用法及代码示例
- CSS clip属性用法及代码示例
- CSS overflow-y属性用法及代码示例
注：本文由纯净天空筛选整理自Archana choudhary大神的英文原创作品 CSS | background-attachment Property。非经特殊声明，原始代码版权归原作者所有，本译文未经允许或授权，请勿转载或复制。