如何利用css3設置獨特背景

時間 2019-11-09

標籤如何利用 css3 css 設置獨特背景欄目 CSS 简体版

原文原文鏈接

本文將介紹如何將多樣化的css3屬性設置一幅屬於你本身的獨一無二的背景圖片javascript

利用css進行背景圖片設置時，發現可提供的屬性也就那麼幾個，而大量的css3屬性又不能直接使用在背景圖片上，其中主要就是filter濾鏡中強大的對圖片的裝飾方法，因此今天就和你們分享如何對背景圖片進行獨一無二的裝點css

階段一: 單純使用css3修飾圖片html

html:java

<body>
        <div id="decoration"></div>
    </body>

css:css3

*{
    margin: 0  
}

body.html{
    height:  100%
}

#decoration {
    min-height: 100%;
    background-size: cover;
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-position: center center;
    background-image: url('../ima.jpg');
    filter: brightness(.7);
    //more 
}

注: 其中第一項的height：100%是必須的url

原理就是使用fixed將一張圖片放入一個塊元素裏，再調整大小使其大小適應body成爲'真正的background'，此時圖片會徹底覆蓋整個頁面，且不會產生滾動(scroll)，以後，就能夠使用css3屬性修改圖片了spa

階段二: 利用js動態更改圖片樣式3d

javascript:code

window.onscroll = function(){
    if(window.pageXOffset > 0) {
        var opa = (window.pageXOffset / 80);
        document.getElementById('#decoration').style.opacity = 1-kk;
    }
}

此方法能夠實現滾輪滾動時，動態改變圖片的透明度，配合文字及其餘樣式顯示，效果至關不錯
htm