【靈活運用CSS】

時間 2019-12-04

原文原文鏈接

假設咱們的pm有這樣一個需求, 一張簡單的透明png圖片，如圖：javascript

如今要求圖片的顏色能根據手機殼的顏色來變色...開個玩笑，通常這個時候已經打起來了css

要求是用戶能夠根據用戶點擊的按鈕顏色來設置圖片的顏色，也就是說咱們的這張黑色主色的圖片遠遠沒法知足要求,那麼該怎麼辦呢？ 找UI吧，多出幾張不就好了，ok 作完以後，需求又改了一下，就是不只有幾個能夠特定的可供選擇顏色的按鈕，還能夠直接在顏色選取器裏選取顏色...   作不了，作不了
其實乍一聽好像很變態，不過呢，別急,咱們甚至能夠不須要藉助太多的javascript，用css就能搞定
這時咱們的filter（濾鏡）屬性出場

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

　　　　能夠看到，屬性有不少可選值，他們都是什麼意思呢？
　　　　html

1　　grayscale灰度

2　　sepia褐色（有種復古的舊照片感受）

3　　saturate飽和度

4　　hue-rotate色相旋轉

5　　invert反色

6　　opacity透明度

7　　brightness亮度

8　　contrast對比度

9　　blur模糊

　　10　　drop-shadow陰影java

這裏咱們用到的是drop-shadow瀏覽器

drop-shadow也能夠理解爲投影，它很符合真實世界的投影，好比非透明的顏色，就有投影；透明部分，光線穿過，沒投影dom

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

第三個參數若是不寫直接填寫爲色值如this

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

這就表明這張圖片在原圖的右側100px處生成一'投影'url

寫到這裏還差一點咱們就能夠完成需求了spa

這裏能夠看到實際上是生成了兩張圖片，一張原圖一張投影。到此，應該都能想到，將原圖隱藏就能夠了，因此咱們只需在img外層包裹一層塊級元素，將塊級元素的寬高設定成咱們所須要的，加上overflow屬性,再將原圖定位到父元素的外面，投影留在裏面就ok，直接上成品代碼

css

<style>

#a{
        width: 100px;
        height: 100px;
        border: 1px solid #dddddd;
        margin: 100px auto;
        overflow: hidden;
    }
    img{
        width: 100px;
        height: 100px;
        position: relative;
        left: -100px;
        filter:drop-shadow(100px 0px red)
    }
    #color{
        width: 600px;
        line-height: 60px;
        margin: 100px auto;
        text-align: center;
    }
    #color button,#random {
        width: 100px;
        outline: none;
        border: none;
        height:30px;
        margin-right: 20px;
        color: #fff;
        font-size: 15px;
        cursor: pointer;
    }
    .t {
        margin: 0 auto;
        width: 400px;
        text-align: center;
    }
    #random {
        background: #000000
    }
</style>

html

<!doctype html>
<html lang="en">
<head>

<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>sssssss</title>

</head>
<body>
<div id="a">

<img id="img" src="./2.png" alt="">

</div>
<div id="color">

<p>
    <button>black</button><button>red</button><button>green</button><button>blue</button><button>pink</button><button>gray</button>
</p>

</div>
<div class="t">

<button id='random'>random</button>

</div>
</body>
</html>

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瀏覽器上是不支持的。

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。