background-attachment:fixed应用
生活随笔
收集整理的這篇文章主要介紹了
background-attachment:fixed应用
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
設置為fixed屬性，背景相對于屏幕窗口固定，然后如果有一張全屏的圖片，再來一張全屏的圖片，就可以看到與平時滾動屏幕不同的切換圖片。代碼
CSS部分：
HTML部分：
<div class="main content"><div class="fixed-bg bg-1"><h2>此處是圖片</h2></div><div class="fixed-bg bg-2"><h2>又一張圖片</h2></div> </div>由此可以想到：如果圖片之間加上內容 ，就會是比較新鮮的滾動方式：
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Document</title><style type="text/css">html, body,.content{height: 100%;}h2, body { margin: 0;}.fixed-bg { position: relative;background-size: cover;background-attachment: fixed;height: 100%;background-position: center center;}.bg-1 { background-image: url("images/cd-background-1.jpg");}.container { padding: 23% 1%;background-color: #C7ABAB; height: 100%;}.bg-2 { background-image: url("images/cd-background-2.jpg");}</style></head> <body><div class="main content"><div class="fixed-bg bg-1"><h2>此處是圖片</h2></div><div class="scrolling-bg"> <div class="container"><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolore incidunt suscipit similique, dolor corrupti cumque qui consectetur autem laborum fuga quas ipsam doloribus sequi, mollitia, repellendus sapiente repudiandae labore rerum amet culpa inventore, modi non. Illo quod repellendus alias? Cum rem doloremque adipisci accusantium? Saepe, necessitatibus!</p></div></div><div class="fixed-bg bg-2"><h2>又一張圖片</h2></div><div class="scrolling-bg"> <div class="container"><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolore incidunt suscipit similique, dolor corrupti cumque qui consectetur autem laborum fuga quas ipsam doloribus sequi, mollitia, repellendus sapiente repudiandae labore rerum amet culpa inventore, modi non. Illo quod repellendus alias? Cum rem doloremque adipisci accusantium? Saepe, necessitatibus!</p></div></div></div> </body> </html>?
轉載于:https://www.cnblogs.com/samtrybest/p/5071210.html
總結
以上是生活随笔為你收集整理的background-attachment:fixed应用的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 父框架与子框架的互操作
- 下一篇： IOS 实现QQ好友分组展开关闭功能