如何利用css3設置獨特背景

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

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

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

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

階段一: 單純使用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 
}

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

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

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

javascript:

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

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

GPU云服務器云服務器設置背景設置背景圖設置背景圓角 python設置背景

文章版權歸作者所有，未經(jīng)允許請勿轉載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉載請注明本文地址：http://www.ezyhdfw.cn/yun/115295.html

可能是最全的前端動效庫匯總

摘要：非常的龐大，而且它是完全為設計而生的動效庫。它運行于純粹的之上，是目前最強健的動畫資源庫之一?？赡苁莿?chuàng)建滾動特效最好用的工具，它支持大量的瀏覽器，只要它們支持和特性?？梢酝ㄟ^安裝吊炸天了，接近現(xiàn)實生活中的物理運動碰撞慣性動畫庫。收集日期為2019-02-28，★代表當時的該項目在github的star數(shù)量 Animate.css 56401 ★ 一個跨瀏覽器的動效基礎庫，是許多基礎動...

afishhhhh 2019-05-23 16:24 評論0 收藏0
CSS相關文章

摘要：如何用獲取虛擬鍵盤高度前端早讀課月號早讀文章由湯谷投稿分享。大殺器和把動畫轉換成原生動畫初來乍到，本文搬運自我月份在知乎發(fā)的文章。前端面試之 CSS3 新特性除了 HTML5 的新特性，CSS3 的新特性也是面試中經(jīng)常被問到的。如何用 js 獲取虛擬鍵盤高度？-前端早讀課 9月7號早讀文章由@湯谷投稿分享。正文從這開始～這是一個存在很久的歷史問題了，對于這樣一個具有普遍性的問題...

FrozenMap 2019-08-29 14:21 評論0 收藏0
如何居中一個元素（終結版）

摘要：源代碼演示利用將要水平排列的塊狀元素設為，然后在父級元素上設置，達到與上面的行內(nèi)元素的水平居中一樣的效果。前言本文主要介紹水平居中，垂直居中，還有水平垂直居中各種辦法，思維導圖如下： showImg(https://segmentfault.com/img/bVblwhg?w=1334&h=563); 如需本文的思維導圖，請猛戳Github個人博客一、水平居中 1.行內(nèi)元素水平居...

Hydrogen 2019-08-29 16:56 評論0 收藏0
如何居中一個元素（終結版）

摘要：源代碼演示利用將要水平排列的塊狀元素設為，然后在父級元素上設置，達到與上面的行內(nèi)元素的水平居中一樣的效果。前言本文主要介紹水平居中，垂直居中，還有水平垂直居中各種辦法，思維導圖如下： showImg(https://segmentfault.com/img/bVblwhg?w=1334&h=563); 如需本文的思維導圖，請猛戳Github個人博客一、水平居中 1.行內(nèi)元素水平居...

hlcc 2019-08-02 11:43 評論0 收藏0
如何居中一個元素（終結版）

摘要：源代碼演示利用將要水平排列的塊狀元素設為，然后在父級元素上設置，達到與上面的行內(nèi)元素的水平居中一樣的效果。前言本文主要介紹水平居中，垂直居中，還有水平垂直居中各種辦法，思維導圖如下： showImg(https://segmentfault.com/img/bVblwhg?w=1334&h=563); 如需本文的思維導圖，請猛戳Github個人博客一、水平居中 1.行內(nèi)元素水平居...

Meils 2019-08-23 12:20 評論0 收藏0