mix-blend-mode及background-blend-mode實現炫酷的圖片樣式

jackwang 發布于2019-08-23 14:13 / 629人閱讀

摘要：在網上看到了有如相機功能的實現比較好看的圖片樣式，自己也想弄下，在這里記錄下效果圖相關屬性正常正片疊底濾色疊加變暗變亮顏色減淡顏色加深強光柔光差值排除色相飽和度顏色

在網上看到了有如相機功能的mix-blend-mode實現比較好看的圖片樣式，自己也想弄下，在這里記錄下

1.效果圖

2.mix-blend-mode相關屬性

{
    mix-blend-mode: normal;         // 正常
    mix-blend-mode: multiply;       // 正片疊底
    mix-blend-mode: screen;         // 濾色
    mix-blend-mode: overlay;        // 疊加
    mix-blend-mode: darken;         // 變暗
    mix-blend-mode: lighten;        // 變亮
    mix-blend-mode: color-dodge;    // 顏色減淡
    mix-blend-mode: color-burn;     // 顏色加深
    mix-blend-mode: hard-light;     // 強光
    mix-blend-mode: soft-light;     // 柔光
    mix-blend-mode: difference;     // 差值
    mix-blend-mode: exclusion;      // 排除
    mix-blend-mode: hue;            // 色相
    mix-blend-mode: saturation;     // 飽和度
    mix-blend-mode: color;          // 顏色
    mix-blend-mode: luminosity;     // 亮度

    mix-blend-mode: initial;
    mix-blend-mode: inherit;
    mix-blend-mode: unset;
}

3.在css上加mix-blend-mode

html文件

css樣式

.container{
    position: relative;
    margin: 140px auto;
    width: 120px;
    height: 120px;
}
.item{
    position: absolute;
    top: 0;
    left: 0;
    width: 100px;
    height: 100px;
    border-radius: 50%;
    mix-blend-mode: normal;
}
.mode1{
    transform: translateX(30%);
    background: rgba(255, 0, 255, .8);
}
.mode2{
    transform: translateX(-30%);
    background: rgba(0, 255, 255, .8);
}
.mode3{
    transform: translateY(-50%);
    background: rgba(0, 255, 0, .8);
}
#select{
    position: absolute;
    left: 500px;
    top: 100px;
}

4.使用background-blend-mode

css文件

.root {
    width: 400px;
    height: 500px;
    margin: 20px auto;
    background: url(../images/22.jpg),
        url(https://user-images.githubusercontent.com/8554143/34369175-c14ae23e-eaf4-11e7-96f1-e146e5e5a96b.jpg);
    background-size: cover;
    /*background-blend-mode: lighten;*/
}
#root{
    position: absolute;
    top: 50px;
    left: 50px;
}
ul{
    margin: 0;
    padding: 0;
    list-style: none;
}
/* 下拉框包含層 */
#selectedItem{
    width: 240px;
    cursor: pointer;
}
/* 已選中的選項 */
#promptText{
    position: relative;
    padding-left: 10px;
    width: 230px;
    height: 30px;
    line-height: 30px;
    border: 1px solid #d3d3d3;
    border-radius: 4px;
    background: #fff;
    color: #999;
    font-size: 14px;
}
/* 圖標 */
#arrows{
    position: absolute;
    top: 0;
    right: 0;
    width: 30px;
    height: 30px;
    vertical-align: middle;
}
#arrows:focus{
    outline: none;
}
/* 下拉可選項包含層 */
.choiceDescription{
    position: absolute;
    display: none;
    /*overflow: hidden;*/
    margin-top: 2px;
    width: 240px;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-shadow: 0 1px 6px rgba(0, 0, 0, .1);
    background: #fff;
}
.show{
    display: block;
}
/* 下拉可選項 */
.item{
    height: 30px;
    line-height: 30px;
    padding-left: 10px;
    font-size: 15px;
    color: #666;
}
.item:hover, .active{
    color: #fff;
    background: rgba(49, 255, 195, 0.67);
}

html文件



    
        請選擇你喜歡的文字
        
            normal--正常
            multiply--正片疊底
            screen--濾色
            overlay--疊加
            darken--變暗
            lighten--變亮
            color-dodge--顏色減淡
            color-burn--顏色加深
            hard-light--強光
            soft-light--柔光
            difference--差值
            exclusion--排除
            hue--色相
            saturation--飽和度
            color--顏色
            luminosity--亮度

5.注意項

mix-blend-mode及background-blend-mode存在兼容性

正在努力學習中，若對你的學習有幫助，留下你的印記唄（點個贊咯^_^）

往期好文推薦：

判斷iOS和Android及PC端

純css實現瀑布流（multi-column多列及flex布局）

實現單行及多行文字超出后加省略號

微信小程序之購物車和父子組件傳值及calc的注意事項

GPU云服務器云服務器圖片樣式 webrtc現狀及實現概要 html列表樣式圖片公開樣式或圖片的接口

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

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/100277.html

mix-blend-mode及background-blend-mode實現炫酷的圖片樣式

摘要：在網上看到了有如相機功能的實現比較好看的圖片樣式，自己也想弄下，在這里記錄下效果圖相關屬性正常正片疊底濾色疊加變暗變亮顏色減淡顏色加深強光柔光差值排除色相飽和度顏色在網上看到了有如相機功能的mix-blend-mode實現比較好看的圖片樣式，自己也想弄下，在這里記錄下 1.效果圖 showImg(https://segmentfault.com/img/bVblsM0?w=726&...

gougoujiang 2019-08-30 15:54 評論0 收藏0
CSS3學習小結

摘要：看到人家實現的實在是太棒了，就想到該學學了。屬性用來查詢瀏覽器是否支持新特性。還有語句，不支持的時候執行。還支持多個條件塊，，，。瀏覽器支持情況只有，，的支持情況比較好。這幾日在http://lab.iamvdo.me/houdini/看到了很炫酷的CSS實現?？吹饺思覍崿F的實在是太棒了，就想到該學學CSS了。 @support屬性 @support:用來查詢瀏覽器是否支持css新特...

WrBug 2019-08-29 13:47 評論0 收藏0
[盤點]項目中可以怎么優化圖片

摘要：雪碧圖雪碧圖就是把很多小的圖整合到一起，制作成一張比較大的圖，然后作為元素的背景圖片使用，定位到相應的圖片即可。除此之外，使用雪碧圖，有兩個個注意地方不要把頁面所有的圖片都合并，比如把整合會破壞的語義結構。看似平常的事物，往往會蘊含的巨大的智慧。把看似平常的事物簡單做好，可能很正常。如果能把平常的事物做精，做細，這個不平常。 1.前言每一個開發者在開發項目中，不可避免要和圖片打交道...

lykops 2019-08-23 13:41 評論0 收藏0
[盤點]項目中可以怎么優化圖片

摘要：雪碧圖雪碧圖就是把很多小的圖整合到一起，制作成一張比較大的圖，然后作為元素的背景圖片使用，定位到相應的圖片即可。除此之外，使用雪碧圖，有兩個個注意地方不要把頁面所有的圖片都合并，比如把整合會破壞的語義結構。看似平常的事物，往往會蘊含的巨大的智慧。把看似平常的事物簡單做好，可能很正常。如果能把平常的事物做精，做細，這個不平常。 1.前言每一個開發者在開發項目中，不可避免要和圖片打交道...

hedzr 2019-08-02 12:07 評論0 收藏0
更豐富的網頁多圖層效果：css混合模式

摘要：與繪制順序密切相關的概念是層疊上下文。把正常也算上的話，現在網頁里可用的混合模式一共種。因此，正片疊底是一個變暗的混合模式。需要注意的是，其中這個位于最下層的背景該元素無背景色，它的混合模式其實是沒有作用的，可以認為就是默認值。圖層在Photoshop等圖像編輯軟件里，圖層是最基礎的概念之一。我們平時看一張照片，就可能想到遠處的背景、近處的人物這樣的描述，這其實就是在劃分圖層。多個...

Ku_Andrew 2019-08-30 12:44 評論0 收藏0