CSS高度な特殊効果（下）

3.混合モード合成

グラフィック編集ソフトウェア（などでPhotoshopの重畳された2つの設計要素を混合する場合）、設計者は、どのくらいの色を選択することができます。
CSSコンポジットおよびブレンディング標準は、私たちは、CSSでのソフトウェアの編集、グラフィックスを使用することを可能にする混合モードを。
最も単純なハイブリッドモード（乗算）、ソースピクセル値をカラーチャンネルを乗じて注目画素値に対応する各カラーチャンネルに対して計算される「正オーバーレイ」で、混合画像が暗くなります。これは、白を表す1、グレースケールの黒を表す混合モードグレースケール、0によって理解することができます。0.8ソースは、目標値は0.5であり、最終的な値が乗算されることと仮定される\（0.8 \ 0.4 times0.5 = \）、DIM。

<article id="milky-way" class="section-milkyway section stacked inverted">
    <div class="wrapper">
        <h2 class="section-title">The Milky Way</h2>
        <div class="section-text">
            <p>...</p>
        </div>
    </div>
</article>

.section-milkyway {
    background-image: url(img/milkyway.jpg);
    background-color: #202D53; /* 给背景图片上色 */
    background-blend-mode: luminosity; /* 设置混合模式为明度（luminosity） */
}

：要素のミックス混合要素とその背景を。

<article id="planets" class="section-planets section stacked inverted">
    <div class="wrapper">
        <h2 class="section-title">The Planets</h2>
        <img class="fig fig-planet" src="img/saturn.png" alt="The planet Saturn and its ring system">
        <div class="section-text">
            <p>...</p>
        </div>
    </div>
</article>

.fig-planet {
    mix-blend-mode: screen; /* 使用滤色（screen）混合模式让图片与页面的背景色相融合。 */
}

テキスト中空：

<h2 class="universe-title">
    <svg viewBox="0 0 400 120" role="presentation">
        <text>
            <tspan class="universe-span-1" x="6" dy="0.8em">The Observable</tspan>
            <tspan class="universe-span-2" x="3" dy="0.75em">Universe</tspan>
        </text>
    </svg>
</h2>

.universe-title text {
    fill: #602135; /* SVG中的文本颜色通过fill属性控制 */
    text-transform: uppercase;
}
.universe-span-1 {
    font-size: 53.2px;
}
.universe-span-2 {
    font-size: 96.2px;
}

@supports (mix-blend-mode: screen) {
    .universe-title {
        mix-blend-mode: screen;
    }
    .universe-title text {
        fill: #000; /* 使用混合模式的同时，也将文本的填充颜色改为黑色，让它完全透明。 */
    }
}

Chromeブラウザ：

IEブラウザ：

分離は、グループ内のハイブリッド制御要素のグループを作成することです。

<div class="group group-a">
    <div class="item one"></div>
    <div class="item two"></div>
    <div class="item three"></div>
</div>
<div class="group group-b">
    <div class="item one"></div>
    <div class="item two"></div>
    <div class="item three"></div>
</div>

body {
    background-image: repeating-linear-gradient(45deg, #fff, #fff 20px, #eee 0, #eee 40px);
    background-size: cover;
}
.group {
    position: relative;
    margin: 2em;
}
.group-b {
    left: 200px;
    opacity: 0.999;
    /*isolation: isolate;*/
}
.item {
    width: 100px;
    height: 100px;
    position: absolute;
    background-color: #ccc;
    mix-blend-mode: multiply;
    clip-path: circle();
}
/* 省略 */

Firefoxブラウザ：

画像処理における4.CSS：フィルタ

フィルタは、要素とその子に適用されます。フィルタを介して（順番に）要素に1つの以上の効果を適用することができます。

.universe-header {
    /* 将颜色去掉50%,将对比度提示为正常值的1.5倍。 */
    filter: grayscale(50%) contrast(1.5);
}

開発者用ツールのブラウザでスタイルを調整するには、異なる値の効果を確認することができます。

ほとんどのフィルタは、いずれかのパーセント値、および許容値を受け入れることができます。上限を超える任意の値が最大値とされるであろう。
opacity()フィルタとopacity区別性は、前者の実際の効果は、フィルタ・チェーン内のその位置に依存していることです。これとは対照的に、opacityプロパティは常に、あなたが適用されたすべてのフィルタ後の唯一の作品です。
色相回転：

.fig-sun {
    filter: contrast(0.34) brightness(1.6) sepia(1) hue-rotate(10deg);
    mask: url(#circlemask); /* 使用SVG蒙版技术将黑色背景遮住。 */
}

先使用sepia()滤镜给图片上色，再用hue-rotate()滤镜旋转图片的整体色相，以标准色轮为参照。
太阳及其黑子的图片（原图）：

给图片添加滤镜之后（旋转色相）：

box-shadow会应用到元素矩形的边框盒子，而drop-shadow()滤镜应用到元素透明的轮廓。

.nav-section li {
    filter: drop-shadow(0 0 .5em rgba(0,0,0,0.3));
}

blur()滤镜给元素应用高斯模糊。

.fig-planet {
    filter: blur(10px);
}

使用backdrop-filter属性可以实现类似“毛玻璃”的效果。

.section-milkyway .section-text {
    backdrop-filter: blur(5px);
    background-color: rgba(0,0,0,0.5);
}

目前这个属性连Firefox浏览器都不支持哦~

通过CSS加载的图片也可以使用滤镜（同样地，Firefox浏览器还是不支持）。

.figure-filtered {
    background-image: filter(url(img/saturn.png), grayscale(1) opacity(0.4));
}

高级滤镜：
CSS滤镜最强大的地方在于，我们可以使用SVG创建自定义滤镜。

<img class="filter-1977" src="img/cat.jpg" alt="Charles the Cat">
<svg height="0" viewBox="0 0 100 100">
    <filter id="filter-1977"
            primitiveUnits="objectBoundingBox" color-interpolation-filters="sRGB">
      <feComponentTransfer result="contrastout">
          <feFuncR type="linear" slope="1.1" intercept="-0.05"/>
          <feFuncG type="linear" slope="1.1" intercept="-0.05"/>
          <feFuncB type="linear" slope="1.1" intercept="-0.05"/>
      </feComponentTransfer>
      <feComponentTransfer in="contrastout" result="brightnessout"> 
          <feFuncR type="linear" slope="1.1"/>
          <feFuncG type="linear" slope="1.1"/>
          <feFuncB type="linear" slope="1.1"/>
      </feComponentTransfer>
      <feColorMatrix in="brightnessout"
                     type="saturate" values="1.3" result="img" />
      <feFlood flood-color="#f36abc" flood-opacity="0.3"
               x="0" y="0" width="1" height="1"
               result="overlay" />
      <feBlend in="overlay" in2="img" mode="screen" />s
    </filter>
</svg>

.filter-1977 {
    filter: url(#filter-1977);
}

浏览器还没有对SVG效果实现硬件加速，因此自定义滤镜要尽量少用。

5.应用特效的次序

所有剪切、蒙版、混合和滤镜都会在其他属性之后应用包括color、width、height、border、背景属性等设置元素基本外观的属性。
首先，按声明次序应用滤镜。接着剪切元素，然后应用蒙版。最后应用混合模式（opacity属性也是一种混合模式）。

参考资料：

《精通CSS》— [英] 安迪·巴德、[瑞典] 埃米尔·比约克隆德

3.混合モード合成

画像処理における4.CSS：フィルタ

5.应用特效的次序

おすすめ