消息來源：CSS圖像效果

在這個簡短的CSS教程中，我將向您展示如何創建一些非常酷和簡單的CSS圖像效果，您可以將其應用於任何在線圖像。我將向您展示的圖像效果是攝影師製作照片時最常用的照片效果。

我將演示的CSS圖像效果是：

1. 舊紙覆蓋
2. 黑和白
3. 棕褐色
4. 暖色
5. 冷色
6. 綠色色調
7. 洋紅色調

儘管您可以使用Photoshop，Lightroom等工具或MockoFun等在線工具及其出色的老式照片編輯器來編輯照片，但是如果您只需要在網頁上放置圖片並應用圖片濾鏡，以下是創建漂亮CSS圖片的方法效果。

使用CSS的CSS圖像效果 filter

filter當您需要進行圖像調整（例如調整網頁中圖像的對比度，亮度，飽和度等）時，CSS屬性是非常有用的工具。

這是可以filter在CSS中使用的值的列表：

• blur 用於為圖像添加模糊
• brightness 用於使圖像更亮或更暗
• contrast 調整圖像的對比度
• drop-shadow 用作替代 box-shadow
• grayscale 用於將圖像轉換為灰度
• hue-rotate 調整照片的色相值
• invert 反轉圖像的顏色
• opacity 改變圖像的透明度
• saturate 更改圖像的飽和度值
• sepia 將棕褐色效果應用於圖像

這些CSS過濾器接受值（例如，百分比或像素blur）。另外，您可以將這些過濾器的組合應用於同一圖像元素（或與此相關的任何其他HTML元素）。

因此，讓我們看看CSS filter屬性的作用！

CSS圖像效果：原始照片

好吧，讓我們以這張舊大眾甲殼蟲的照片為例

讓我們使用filter屬性的各種值對其應用一些很酷的CSS圖像效果。

要創建一個更復古的效果，我們也將使用這個舊質感的復古紙紋理由免費包PhotoshopSupply。您還可以查看包含150多種不同復古紋理的舊紙張背景收藏。

CSS圖像效果：復古疊加

HTML代碼：

<div class="old-paper">
<img class="original-image" src="https://i.imgur.com/ouDwClz.jpg" />
<div class="overlay">
<img src="https://i.imgur.com/4rKVgAQ.png">
</div>
</div>

CSS代碼：

.old-paper{
  position:relative;
  max-width:850px;
}

.original-image{
  width:100%;
  height:100%;
  display:inline-block;
}
.overlay{
  mix-blend-mode:multiply;
  position:absolute;
  display:inline-block;
  left:0;
  top:0;
  right:0;
  bottom:0;
}

.overlay img{
  width:100%;
  height:100%;
}

對於這種老式的圖像效果，我只是在原始圖像上添加了舊紙張紋理，然後將設置mix-blend-mode為multiply。如果您熟悉Photoshop中的混合模式，那麼這很容易理解。

如果不是，則對混合模式的簡短解釋是它們允許對兩個圖像之間的顏色進行數學計算。您必須將每個像素顏色想像為0到1之間的紅色，綠色和藍色值（0,0,0是黑色，而1,1,1,1是白色）。在這種情況下multiply，每個像素的顏色分量將相乘，結果將是顯示像素的顏色。

對於下一個CSS圖像效果，我將使用相同的精確代碼，但此外，我將對原始圖像應用不同的濾鏡。

我們繼續。

CSS圖像效果：黑白

HTML代碼：

<div class="old-paper">
    <img class="original-image black-and-white" src="https://i.imgur.com/ouDwClz.jpg" />
    <div class="overlay">
      <img src="https://i.imgur.com/4rKVgAQ.png">
    </div>
</div>

CSS代碼：

.black-and-white{
  filter:brightness(70%) contrast(150%) saturate(0%) brightness(150%);
}

將CSS類名稱添加.black-and-white到原始圖像會添加黑白效果。如果我們查看CSS代碼，我們可以看到過濾器值的順序：

• brightness(70%) 將圖像的亮度調低到原始圖像的70％
• contrast(150%) 將圖像的對比度提高50％
• saturate(0%) 這完全降低了原始圖像的色彩飽和度
• brightness(150%) 我們將圖像的亮度提高了結果的50％

請記住，filter屬性值是按順序應用的，這意味著一個過濾器的輸入是前一個過濾器的輸出。

現在讓我們查看棕褐色濾鏡效果的設置。

CSS圖像效果：棕褐色

HTML代碼：

<div class="old-paper">
    <img class="original-image sepia" src="https://i.imgur.com/ouDwClz.jpg" />
    <div class="overlay">
      <img src="https://i.imgur.com/4rKVgAQ.png">
    </div>
</div>

CSS代碼：

.sepia{
  filter:filter:saturate(0%) sepia(100%) contrast(150%) saturate(150%);
}

sepiaCSS內置了一個過濾器，但是我發現結果有點無聊，所以我決定做一些調整。

我對圖像進行去飽和處理以使其成為黑白，應用棕褐色濾鏡，將對比度提高50％，然後將所得圖像的飽和度提高50％。

我對結果非常滿意。請注意，對於您的圖像，結果可能會有所不同，因此請使用設置，直到獲得所需的結果。

CSS圖像效果：暖色

HTML代碼：

<div class="old-paper">
    <img class="original-image warm" src="https://i.imgur.com/ouDwClz.jpg" />
    <div class="overlay">
      <img src="https://i.imgur.com/4rKVgAQ.png">
    </div>
</div>

CSS代碼：

.sepia{
  filter: sepia(50%) contrast(150%) saturate(200%) brightness(100%) hue-rotate(-15deg);
}

攝影師經常使用溫暖的彩色圖像效果使照片更具吸引力。為了使圖像“變暖”，我們需要將顏色移向紅色，橙色和黃色。

這可能需要一些實驗，但是在這種情況下對我有用的是sepia過濾器和hue-rotate過濾器的組合。

我們已經看到了sepia過濾器的作用。怎麼hue-rotate樣

hue-rotate改變圖像中所有顏色的色調。但是，為什麼值以度為單位？

想像一下色輪（實際上，不要想像，就在這裡）

使用，hue-rotate您可以在色輪上按x度推入一種顏色。360度將完全旋轉，這意味著完全沒有變化。此屬性的值也適用於負數，例如-90等於270。

CSS圖像效果：冷色

HTML代碼：

<div class="old-paper">
    <img class="original-image cold" src="https://i.imgur.com/ouDwClz.jpg" />
    <div class="overlay">
      <img src="https://i.imgur.com/4rKVgAQ.png">
    </div>
</div>

CSS代碼：

.cold{
  filter: hue-rotate(180deg) sepia(75%) contrast(150%) saturate(300%) hue-rotate(180deg);
}

寒冷的顏色更偏向藍色和青色。與我們的暖色CSS效果不同的是，棕褐色已經在暖色區域中。因此，要解決該問題，我們首先hue-rotate在應用sepia過濾器之前使用進行180度移位。

這將創建棕褐色效果（暖色調），其顏色將被其互補色（這就是色輪相反側上的顏色）所代替。因此，hue-rotate在最後180遍再進行一次操作，將使顏色恢復其原始色相，並具有反向的棕褐色效果，使所有顏色都變藍，因此變冷。

我希望你明白了！

如果沒有，請在下面給我留言，我會盡快與您聯繫。

關於我們的圖像效果。

CSS圖像效果：綠色色調

HTML代碼：

<div class="old-paper">
    <img class="original-image tint-green" src="https://i.imgur.com/ouDwClz.jpg" />
    <div class="overlay">
      <img src="https://i.imgur.com/4rKVgAQ.png">
    </div>
</div>

CSS代碼：

.tint-green{
  filter: hue-rotate(-30deg) sepia(75%) contrast(150%) saturate(300%) hue-rotate(30deg);
}

在色彩理論中，色彩是指您要添加純白色的顏色。在攝影中，顏色著色是指在照片中的所有顏色上添加一些特定顏色。

對於這種色調圖像效果，我使用了與暖色/冷色效果相同的原理，為原始圖像添加了綠色色調。

經過一些實驗，我得出了hue-rotate濾鏡中使用的30度偏移，這與棕褐色濾鏡的黃色調和我們要應用的綠色調之間的距離有關。

CSS圖像效果：洋紅色色調

HTML代碼：

<div class="old-paper">
    <img class="original-image tint-magenta" src="https://i.imgur.com/ouDwClz.jpg" />
    <div class="overlay">
      <img src="https://i.imgur.com/4rKVgAQ.png">
    </div>
</div>

CSS代碼：

.tint-magenta{
  filter: hue-rotate(-270deg) sepia(55%) contrast(150%) saturate(300%) hue-rotate(270deg);
}

與綠色色調效果相同，但是這次的值為270度hue-rotate。

注意：使用具有CSS效果的圖像的一個缺點是Google看不到帶有已應用效果的圖像。就本教程而言，以下圖像是應用於原始圖像的CSS圖像效果的屏幕截圖。它們不是實時CSS效果。如果您想欣賞或欣賞現場效果，請檢查此CodePen：

https://codepen.io/inegoita/pen/bGVXqam

學分

• PhotoshopSupply.com提供的舊紋理圖像