應用background-position實現css視差效果

阿新 • • 發佈：2019-01-18

我們知道background-position的取值可以是關鍵字、畫素或百分比等，但不可以將畫素或百分比等單位與關鍵字混合使用，這樣可能會導致css失效。尤其要說的一點是，如果應用百分比的話，background-position: 0, 20%; ，這個20%是圖片上距離左上角的20%的點，定位到父元素上距離左上角20%的位置。
正是因為這個特性，我們才可以做一些特別的效果。比如說一有一個個網站創造出的有遠近效果的背景。
這個背景是一些樹葉，當我們將視窗的大小改變時，我們可以發現葉子的移動速度不同，給人一種有遠近的感覺。它的做法給body, .middle .fore分別設定背景圖片葉子，並將它們的background-position水平值分別設定為20%，40%和150%，從而達到想要的效果。
以下為關鍵部分html及css的程式碼。

        <body>
            <div class="middle">
                <div class="fore">
                    /*其他內容*/
                </div>
            </div>
        </body>

        body{
            background: url(image.png) repeat-x 20% 0;
            background-color 
: #d3ff99;
        }
        .middle{
            background: url(image.png) repeat-x 40% 0;
            background-color: transparent;
        }
        .fore{
            background: url(image.png) repeat-x 150% 0;
            background-color: transparent;
        }

應用background-position實現css視差效果

我們知道background-position的取值可以是關鍵字、畫素或百分比等，但不可以將畫素或百分比等單位與關鍵字混合使用，這樣可能會導致css失效。尤其要說的一點是，如果應用百分比的話，background-position: 0, 20%; ，這個20%

使用animation替換background-image實現一些動畫效果

使用animation替換背景圖片來實現動畫效果時，如果直接替換背景圖片來實現，ie是不能相容的比如： .d-pro1{ width: 641px; height: 767px; backgroun

OCiOS動效設計：UITableView 實現滾動視差效果

前言最近在使用‘悅跑圈’這個App，其‘跑鞋展廳’功能的滾動視差效果深深地吸引了我，在網上搜羅了大量的資料，如下，我將仿照該效果簡單介紹實現方法。效果演示細節實現 OffsetImageCell.m - (void)cellOff

css實現3D盒子效果

origin fin courier ora 設置 blog select 5% solid -------------------------------------- 用css3的新屬性來設置3D盒子效果（chrome瀏覽器），代碼如下： ---------

CSS實現輪播效果

ini html out mes 實現 discover body opacity屬性 blog 還沒有學習如何用JS實現輪播圖效果，所以就用CSS做了一個假的~ 氮素！目前只調出三個圖實現輪播，圖越多代碼就越復雜，後面就沒調了，才不是因為我懶_(:з」∠)_ 代碼如下↓↓

利用css實現hover動態效果

idt form 想要 utf-8 屬性 doc lin linear nbsp .font em:hover { font-size: 2em } .font strong:hover { font-weight: normal } .font span:hover {

css動畫效果：實現鼠標移入菜單欄文字下出現下劃線

boa 代碼 active lock osi int 事件 type 添加 <!doctype html> <html lang="en"> <head> <meta charset="UTF-8">

css實現幻燈片播放效果

key 改變 list css init ase mar box 如果用css實現幻燈片播放是最基礎的，閑下來沒事就試著寫了一下，如果有不夠完善或者方法不好的地方還請指點。下面我就用兩種方法實現css花燈片效果。方法1：定位。通過position屬性改變left值 ht

CSS background-position

IT 模型 glob lob bsp ont oba 地方 font 一個div以左上角為原點，向右為X的正方向，向下為Y的正方向要將一圖片元素以背景的方式放置在一個div的任何地方，可以用到這個屬性初始：background: url("../img/global

css實現單選效果，看看有趣的tabIndex

技術分享分享多說有趣的 gif tab abi tabindex img 以前我實現單選變色幾乎都是用js實現的，今天看到有個css屬性可以直接實現單選變色，很開心啊~ 話不多說看效果實現的代碼如下使用tabIndex還可以實現別的有趣的效果話不多說看效果

css實現圓形倒計時效果

pos spa 代碼部分 height osi nsf abs 通過實現思想： 1.最外層包裹內部的div1(.box) 2.內部左右兩邊div2(.left_box和.right_box)，寬度為div1的一半，通過overflow:hidden隱藏其內部的div 3

div+css+position實現簡單的縱向導航欄

完成效果：這應該是很簡單的縱向導航欄了。 OK，進入正題首先，我們看上面的效果圖可以分析得出，要實現這個效果需要用到的技術點 1.hover 2.position 3.佈局我認為在這個效果的實現上最需要注意的就是position,當我們在給子元素用absolute的時候，一定不要忘了個

使用css實現滑動門效果的製作

一般在頁面的導航欄部分使用滑動門技術，此做法的優點在於不管裡面的文字有多少，都可以實現自由伸縮，不影響外觀。其做法如下：在css裡面設定的樣式: a { &n

div css Firefox和IE瀏覽器相容問題用CSS實現cellSpacing屬性效果

分享一下我老師大神的人工智慧教程！零基礎，通俗易懂！http://blog.csdn.net/jiangjunshow 也歡迎大家轉載本篇文章。分享知識，造福人民，實現我們中華民族偉大復興！

只用css實現瀑布流效果

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> &

簡單css實現3d動畫效果

知識儲備 transition: transform 10s; 過度的變形時間為10s transform-style: preserve-3d; 變形的樣式是3d變化 relative和absolute：相對定位和絕對定位 relative相對於原來文

html與css實現彈窗效果

彈窗由html、css組成，通過js控制彈窗 html程式碼： <div class="btn_select">//刪除儲存按鈕 <ul> <li>

CSS中的pointer-events屬性實現點穿效果

CSS的pointer-events屬性 auto：與 pointer-events 屬性未指定時的表現效果相同。 none：該元素永遠不會成為滑鼠事件的 target。但是，當其後代元素的 pointer-events 屬性指定其他值時，滑鼠事件可以指向後代元素，在這種情況下，滑

視差效果的實際應用

在實際開發中，應用一些微互動、視差效果，可以讓頁面更加生動。如下面的例子：這個例子中運行了3D transform 的相關知識。具體細節如下分析。 1、切圖將psd稿上的這個區域切成如下圖

使用CSS實現圈人效果(CSS Sprites)

我最早了解到”圖片合併”技術, 應該是在大學遊戲時代, 會發現很多遊戲圖示, 都會合並在一個位圖中, 然後使用類似”遮罩”的技術來分別顯示各種圖示. 第一次使用CSS Sprites技術的時候, 其實並不知道它的這個名字, 也並沒覺得多稀奇,就是個遮罩麼. 今天玩開心網的圈人遊戲時