background-attachment:fixed应用
生活随笔
收集整理的這篇文章主要介紹了
background-attachment:fixed应用
小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.
設(shè)置為fixed屬性，背景相對(duì)于屏幕窗口固定，然后如果有一張全屏的圖片，再來一張全屏的圖片，就可以看到與平時(shí)滾動(dòng)屏幕不同的切換圖片。代碼
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>由此可以想到：如果圖片之間加上內(nèi)容 ，就會(huì)是比較新鮮的滾動(dòng)方式：
<!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>?
轉(zhuǎn)載于:https://www.cnblogs.com/samtrybest/p/5071210.html
總結(jié)
以上是生活随笔為你收集整理的background-attachment:fixed应用的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 父框架与子框架的互操作
- 下一篇： IOS 实现QQ好友分组展开关闭功能