資訊專欄INFORMATION COLUMN
假設我們的pm有這樣一個需求, 一張簡單的透明png圖片，如圖：
現(xiàn)在要求圖片的顏色能根據手機殼的顏色來變色...開個玩笑，一般這個時候已經打起來了
要求是用戶可以根據用戶點擊的按鈕顏色來設置圖片的顏色，也就是說我們的這張黑色主色的圖片遠遠無法滿足要求,那么該怎么辦呢？ 找UI吧，多出幾張不就行了，ok 做完之后，需求又改了一下，就是不僅有幾個可以特定的可供選擇顏色的按鈕，還可以直接在顏色選取器里選取顏色... 做不了，做不了
其實乍一聽好像很{{BANNED}}，不過呢，別急,我們甚至可以不需要借助太多的javascript，用css就能搞定
這時我們的filter（濾鏡）屬性出場
1、filter，從字面意思來看就是濾鏡，官方定義filter屬性定義了元素(通常是![]()
)的可視效果(例如：模糊與飽和度)
2、用法
filter: none | blur() | brightness() | contrast() | drop-shadow() | grayscale() | hue-rotate() | invert() | opacity() | saturate() | sepia() | url();
可以看到，屬性有很多可選值，他們都是什么意思呢？
1 grayscale灰度 2 sepia褐色（有種復古的舊照片感覺） 3 saturate飽和度 4 hue-rotate色相旋轉 5 invert反色 6 opacity透明度 7 brightness亮度 8 contrast對比度 9 blur模糊
10 drop-shadow陰影
這里我們用到的是drop-shadow
drop-shadow也可以理解為投影，它很符合真實世界的投影，比如非透明的顏色，就有投影；透明部分，光線穿過，沒投影
其中接收四個參數 如filter: drop-shadow(x偏移, y偏移, 模糊大小, 色值)
第三個參數如果不寫直接填寫為色值 如
img{
width: 100px;
height: 100px;
position: relative;
left: -100px;
filter:drop-shadow(100px 0px red)
}
這就代表這張圖片在原圖的右側100px處生成一"投影"
寫到這里還差一點我們就可以完成需求了
這里可以看到 其實是生成了兩張圖片，一張原圖一張投影。到此，應該都能想到，將原圖隱藏就可以了，所以我們只需在img外層包裹一層塊級元素，將塊級元素的寬高設定成我們所需要的，加上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() +")"
}
最終效果
具體詳細的寫法還需要根據不同的需求來定，其它用法大家也可以研究一下，如sepia可以讓多色彩的圖片看起來有復古效果， blur 讓圖片模糊。。。 具體用法就不一一介紹了 不過filter在ie瀏覽器上是不支持的。
文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉載請注明本文地址：http://www.ezyhdfw.cn/yun/114740.html
摘要：前言柵格通常捆綁在各種框架中，但有時你需要自己去定制一個柵格來滿足實際的業(yè)務需要，本文聊聊柵格系統(tǒng)在項目中的靈活運用。 前言 css柵格通常捆綁在各種框架中，但有時你需要自己去定制一個css柵格來滿足實際的業(yè)務需要，本文聊聊css柵格系統(tǒng)在項目中的靈活運用。 需求 UI設計了如下布局，其中左上角橙色部分是固定的，藍色部分是動態(tài)渲染的，從前往后依次展示，有一個就顯示一塊，有二個就顯示二塊...
假設我們的pm有這樣一個需求, 一張簡單的透明png圖片，如圖：showImg(https://segmentfault.com/img/bVbsrhc); 現(xiàn)在要求圖片的顏色能根據手機殼的顏色來變色...開個玩笑，一般這個時候已經打起來了 要求是用戶可以根據用戶點擊的按鈕顏色來設置圖片的顏色，也就是說我們的這張黑色主色的圖片遠遠無法滿足要求,那么該怎么辦呢？ 找UI吧，多出幾張不就行了，ok 做...
閱讀 1159·2021-09-22 15:19
閱讀 1823·2021-08-23 09:46
閱讀 2311·2021-08-09 13:47
閱讀 1480·2019-08-30 15:55
閱讀 1472·2019-08-30 15:55
閱讀 2035·2019-08-30 15:54
閱讀 2852·2019-08-30 15:53
閱讀 765·2019-08-30 11:03
