成人无码视频,亚洲精品久久久久av无码,午夜精品久久久久久毛片,亚洲 中文字幕 日韩 无码

資訊專(zhuān)欄INFORMATION COLUMN

mix-blend-mode及background-blend-mode實(shí)現(xiàn)炫酷的圖片樣式

gougoujiang / 2324人閱讀

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

在網(wǎng)上看到了有如相機(jī)功能的mix-blend-mode實(shí)現(xiàn)比較好看的圖片樣式，自己也想弄下，在這里記錄下
1.效果圖
2.mix-blend-mode相關(guān)屬性 
{
    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;     // 強(qiáng)光
    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;
}
/* 已選中的選項(xiàng) */
#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;
}
/* 圖標(biāo) */
#arrows{
    position: absolute;
    top: 0;
    right: 0;
    width: 30px;
    height: 30px;
    vertical-align: middle;
}
#arrows:focus{
    outline: none;
}
/* 下拉可選項(xiàng)包含層 */
.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;
}
/* 下拉可選項(xiàng) */
.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文件




    

        
請(qǐng)選擇你喜歡的文字

        
    
            
  • normal--正常
    • 
            
  • multiply--正片疊底
    • 
            
  • screen--濾色
    • 
            
  • overlay--疊加
    • 
            
  • darken--變暗
    • 
            
  • lighten--變亮
    • 
            
  • color-dodge--顏色減淡
    • 
            
  • color-burn--顏色加深
    • 
            
  • hard-light--強(qiáng)光
    • 
            
  • soft-light--柔光
    • 
            
  • difference--差值
    • 
            
  • exclusion--排除
    • 
            
  • hue--色相
    • 
            
  • saturation--飽和度
    • 
            
  • color--顏色
    • 
            
  • luminosity--亮度
    •
5.注意項(xiàng)

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

正在努力學(xué)習(xí)中，若對(duì)你的學(xué)習(xí)有幫助，留下你的印記唄（點(diǎn)個(gè)贊咯^_^）

往期好文推薦：

判斷iOS和Android及PC端

純css實(shí)現(xiàn)瀑布流（multi-column多列及flex布局）

實(shí)現(xiàn)單行及多行文字超出后加省略號(hào)

微信小程序之購(gòu)物車(chē)和父子組件傳值及calc的注意事項(xiàng)

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

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

相關(guān)文章

  • mix-blend-mode及background-blend-mode實(shí)現(xiàn)炫酷的圖片樣式

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

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

  • CSS3學(xué)習(xí)小結(jié)

    摘要：看到人家實(shí)現(xiàn)的實(shí)在是太棒了，就想到該學(xué)學(xué)了。屬性用來(lái)查詢?yōu)g覽器是否支持新特性。還有語(yǔ)句，不支持的時(shí)候執(zhí)行。還支持多個(gè)條件塊，，，。瀏覽器支持情況只有，，的支持情況比較好。 這幾日在http://lab.iamvdo.me/houdini/看到了很炫酷的CSS實(shí)現(xiàn)?？吹饺思覍?shí)現(xiàn)的實(shí)在是太棒了，就想到該學(xué)學(xué)CSS了。 @support屬性 @support:用來(lái)查詢?yōu)g覽器是否支持css新特...

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

  • [盤(pán)點(diǎn)]項(xiàng)目中可以怎么優(yōu)化圖片

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

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

  • [盤(pán)點(diǎn)]項(xiàng)目中可以怎么優(yōu)化圖片

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

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

  • 更豐富的網(wǎng)頁(yè)多圖層效果：css混合模式

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

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

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

0條評(píng)論

閱讀需要支付1元查看
<