如何利用css3設(shè)置獨(dú)特背景

Scorpion 發(fā)布于2019-08-30 13:05 / 1364人閱讀

摘要：本文將介紹如何將多樣化的屬性設(shè)置一幅屬于你自己的獨(dú)一無(wú)二的背景圖片利用進(jìn)行背景圖片設(shè)置時(shí)，發(fā)現(xiàn)可提供的屬性也就那么幾個(gè)，而大量的屬性又不能直接使用在背景圖片上，其中主要就是濾鏡中強(qiáng)大的對(duì)圖片的裝飾方法，所以今天就和大家分享如何對(duì)背景圖片進(jìn)行

?????本文將介紹如何將多樣化的css3屬性設(shè)置一幅屬于你自己的獨(dú)一無(wú)二的背景圖片

??????利用css進(jìn)行背景圖片設(shè)置時(shí)，發(fā)現(xiàn)可提供的屬性也就那么幾個(gè)，而大量的css3屬性又不能直接使用在背景圖片上，其中主要就是filter濾鏡中強(qiáng)大的對(duì)圖片的裝飾方法，所以今天就和大家分享如何對(duì)背景圖片進(jìn)行獨(dú)一無(wú)二的裝點(diǎn)

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

html:

css:

*{
    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 
}

注: 其中第一項(xiàng)的height：100%是必須的

原理就是使用fixed將一張圖片放入一個(gè)塊元素里，再調(diào)整大小使其大小適應(yīng)body成為"真正的background"，此時(shí)圖片會(huì)完全覆蓋整個(gè)頁(yè)面，且不會(huì)產(chǎn)生滾動(dòng)(scroll)，之后，就可以使用css3屬性修改圖片了

階段二: 利用js動(dòng)態(tài)更改圖片樣式

javascript:

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

此方法可以實(shí)現(xiàn)滾輪滾動(dòng)時(shí)，動(dòng)態(tài)改變圖片的透明度，配合文字及其他樣式顯示，效果相當(dāng)不錯(cuò)