国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

【靈活運(yùn)用CSS】

icyfire / 712人閱讀

假設(shè)我們的pm有這樣一個(gè)需求, 一張簡(jiǎn)單的透明png圖片，如圖：

現(xiàn)在要求圖片的顏色能根據(jù)手機(jī)殼的顏色來(lái)變色...開個(gè)玩笑，一般這個(gè)時(shí)候已經(jīng)打起來(lái)了

要求是用戶可以根據(jù)用戶點(diǎn)擊的按鈕顏色來(lái)設(shè)置圖片的顏色，也就是說(shuō)我們的這張黑色主色的圖片遠(yuǎn)遠(yuǎn)無(wú)法滿足要求,那么該怎么辦呢？ 找UI吧，多出幾張不就行了，ok 做完之后，需求又改了一下，就是不僅有幾個(gè)可以特定的可供選擇顏色的按鈕，還可以直接在顏色選取器里選取顏色...   做不了，做不了
其實(shí)乍一聽好像很{{BANNED}}，不過(guò)呢，別急,我們甚至可以不需要借助太多的javascript，用css就能搞定
這時(shí)我們的filter（濾鏡）屬性出場(chǎng)

1、filter，從字面意思來(lái)看就是濾鏡，官方定義filter屬性定義了元素(通常是)的可視效果(例如：模糊與飽和度)
2、用法
filter: none | blur() | brightness() | contrast() | drop-shadow() | grayscale() | hue-rotate() | invert() | opacity() | saturate() | sepia() | url();

　　　　可以看到，屬性有很多可選值，他們都是什么意思呢？
　　　　

1　　grayscale灰度

2　　sepia褐色（有種復(fù)古的舊照片感覺(jué)）

3　　saturate飽和度

4　　hue-rotate色相旋轉(zhuǎn)

5　　invert反色

6　　opacity透明度

7　　brightness亮度

8　　contrast對(duì)比度

9　　blur模糊

　　10　　drop-shadow陰影

這里我們用到的是drop-shadow

drop-shadow也可以理解為投影，它很符合真實(shí)世界的投影，比如非透明的顏色，就有投影；透明部分，光線穿過(guò)，沒(méi)投影

其中接收四個(gè)參數(shù) 如filter: drop-shadow(x偏移, y偏移, 模糊大小, 色值)

第三個(gè)參數(shù)如果不寫直接填寫為色值 如

    img{
        width: 100px;
        height: 100px;
        position: relative;
        left: -100px;
        filter:drop-shadow(100px 0px red)
    }

這就代表這張圖片在原圖的右側(cè)100px處生成一"投影"

寫到這里還差一點(diǎn)我們就可以完成需求了

這里可以看到 其實(shí)是生成了兩張圖片，一張?jiān)瓐D一張投影。到此，應(yīng)該都能想到，將原圖隱藏就可以了，所以我們只需在img外層包裹一層塊級(jí)元素，將塊級(jí)元素的寬高設(shè)定成我們所需要的，加上overflow屬性,再將原圖定位到父元素的外面，投影留在里面就ok，直接上成品代碼

css

html






sssssss




javascript

var getRandomColor = function(){

return "#"+Math.floor(Math.random()*16777215).toString(16);

}

var setColor = function (dom) {

dom.style.background = dom.innerHTML
return dom

}
let btn_list = document.querySelectorAll("#color button")
btn_list.forEach(el => {

setColor(el).onclick = function () {
    img.style.filter = "drop-shadow(100px 0px "+ this.innerHTML +")"
}

})

random.onclick = function () {

img.style.filter = "drop-shadow(100px 0px "+ getRandomColor() +")"

}

最終效果

具體詳細(xì)的寫法還需要根據(jù)不同的需求來(lái)定，其它用法大家也可以研究一下，如sepia可以讓多色彩的圖片看起來(lái)有復(fù)古效果， blur 讓圖片模糊。。。 具體用法就不一一介紹了 不過(guò)filter在ie瀏覽器上是不支持的。

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

轉(zhuǎn)載請(qǐng)注明本文地址：http://specialneedsforspecialkids.com/yun/114740.html

相關(guān)文章

  • css柵格系統(tǒng)在項(xiàng)目中的靈活運(yùn)用

    摘要：前言柵格通常捆綁在各種框架中，但有時(shí)你需要自己去定制一個(gè)柵格來(lái)滿足實(shí)際的業(yè)務(wù)需要，本文聊聊柵格系統(tǒng)在項(xiàng)目中的靈活運(yùn)用。 前言 css柵格通常捆綁在各種框架中，但有時(shí)你需要自己去定制一個(gè)css柵格來(lái)滿足實(shí)際的業(yè)務(wù)需要，本文聊聊css柵格系統(tǒng)在項(xiàng)目中的靈活運(yùn)用。 需求 UI設(shè)計(jì)了如下布局，其中左上角橙色部分是固定的，藍(lán)色部分是動(dòng)態(tài)渲染的，從前往后依次展示，有一個(gè)就顯示一塊，有二個(gè)就顯示二塊...

    summerpxy 評(píng)論0 收藏0

  • 【靈活運(yùn)用CSS】

    假設(shè)我們的pm有這樣一個(gè)需求, 一張簡(jiǎn)單的透明png圖片，如圖：showImg(https://segmentfault.com/img/bVbsrhc); 現(xiàn)在要求圖片的顏色能根據(jù)手機(jī)殼的顏色來(lái)變色...開個(gè)玩笑，一般這個(gè)時(shí)候已經(jīng)打起來(lái)了 要求是用戶可以根據(jù)用戶點(diǎn)擊的按鈕顏色來(lái)設(shè)置圖片的顏色，也就是說(shuō)我們的這張黑色主色的圖片遠(yuǎn)遠(yuǎn)無(wú)法滿足要求,那么該怎么辦呢？ 找UI吧，多出幾張不就行了，ok 做...

    lewinlee 評(píng)論0 收藏0

  • 【靈活運(yùn)用CSS】

    假設(shè)我們的pm有這樣一個(gè)需求, 一張簡(jiǎn)單的透明png圖片，如圖：showImg(https://segmentfault.com/img/bVbsrhc); 現(xiàn)在要求圖片的顏色能根據(jù)手機(jī)殼的顏色來(lái)變色...開個(gè)玩笑，一般這個(gè)時(shí)候已經(jīng)打起來(lái)了 要求是用戶可以根據(jù)用戶點(diǎn)擊的按鈕顏色來(lái)設(shè)置圖片的顏色，也就是說(shuō)我們的這張黑色主色的圖片遠(yuǎn)遠(yuǎn)無(wú)法滿足要求,那么該怎么辦呢？ 找UI吧，多出幾張不就行了，ok 做...

    mudiyouyou 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<