首頁 網頁資源RESOURCES CSS
CSS濾鏡,創造各種不同的照片效果吧!

CSS濾鏡,創造各種不同的照片效果吧!

2021.12.06
你會用Photoshop 或者其他軟體讓你的照片變成不同風格
那麼你會使用CSS 讓你的照片套上不同的濾鏡嗎?
讓你的網站更獨具風格且網站的圖片還可以不用一張一張設定
這麼讚的事情還不快學起來!
blur() - 高斯模糊
展示
範例圖片
HTML
複製已複製
<div class="shape-ex1">
    <img src="https://www.great-good.tw/front/public/img/front/original/img-11.jpg" alt="範例圖片" />
</div>
CSS
複製已複製
.shape-ex11{
    width: 300px;
    max-width: 90%;
    margin: 0 auto;
    height: 200px;
    display: block;
    filter: sepia(100%) blur(5px);
}
.shape-ex11 img{
    width: 100%;
    height: 100%;
    object-fit: contain;
}
brightness() - 明亮
展示
範例圖片
HTML
複製已複製
<div class="shape-ex2">
    <img src="https://www.great-good.tw/front/public/img/front/original/img-11.jpg" alt="範例圖片" />
</div>
CSS
複製已複製
.shape-ex2{
    width: 300px;
    max-width: 90%;
    margin: 0 auto;
    height: 200px;
    display: block;
    filter: brightness(200%);
}
.shape-ex2 img{
    width: 100%;
    height: 100%;
    object-fit: contain;
}
brightness() - 對比
展示
範例圖片
HTML
複製已複製
<div class="shape-ex3">
    <img src="https://www.great-good.tw/front/public/img/front/original/img-11.jpg" alt="範例圖片" />
</div>
CSS
複製已複製
.shape-ex3{
    width: 300px;
    max-width: 90%;
    margin: 0 auto;
    height: 200px;
    display: block;
    filter: contrast(200%);
}
.shape-ex3 img{
    width: 100%;
    height: 100%;
    object-fit: contain;
}
drop-shadow() - 陰影
展示
範例圖片
HTML
複製已複製
<div class="shape-ex4">
    <img src="https://www.great-good.tw/front/public/img/front/original/img-11.jpg" alt="範例圖片" />
</div>
CSS
複製已複製
.shape-ex4{
    width: 300px;
    max-width: 90%;
    margin: 0 auto;
    height: 200px;
    display: block;
    filter: drop-shadow(10px 10px 10px black);
}
.shape-ex4 img{
    width: 100%;
    height: 100%;
    object-fit: contain;
}
grayscale() - 灰階
展示
範例圖片
HTML
複製已複製
<div class="shape-ex5">
    <img src="https://www.great-good.tw/front/public/img/front/original/img-11.jpg" alt="範例圖片" />
</div>
CSS
複製已複製
.shape-ex5{
    width: 300px;
    max-width: 90%;
    margin: 0 auto;
    height: 200px;
    display: block;
    filter: drop-shadow(10px 10px 10px black)
}
.shape-ex5 img{
    width: 100%;
    height: 100%;
    object-fit: contain;
}
hue-rotate() - 色相旋轉
展示
範例圖片
HTML
複製已複製
<div class="shape-ex6">
    <img src="https://www.great-good.tw/front/public/img/front/original/img-11.jpg" alt="範例圖片" />
</div>
CSS
複製已複製
.shape-ex6{
    width: 300px;
    max-width: 90%;
    margin: 0 auto;
    height: 200px;
    display: block;
    filter: hue-rotate(90deg);
}
.shape-ex6 img{
    width: 100%;
    height: 100%;
    object-fit: contain;
}
invert() - 負片
展示
範例圖片
HTML
複製已複製
<div class="shape-ex7">
    <img src="https://www.great-good.tw/front/public/img/front/original/img-11.jpg" alt="範例圖片" />
</div>
CSS
複製已複製
.shape-ex7{
    width: 300px;
    max-width: 90%;
    margin: 0 auto;
    height: 200px;
    display: block;
    filter: invert(100%);
}
.shape-ex7 img{
    width: 100%;
    height: 100%;
    object-fit: contain;
}
opacity() - 透明度
展示
範例圖片
HTML
複製已複製
<div class="shape-ex8">
    <img src="https://www.great-good.tw/front/public/img/front/original/img-11.jpg" alt="範例圖片" />
</div>
CSS
複製已複製
.shape-ex8{
    width: 300px;
    max-width: 90%;
    margin: 0 auto;
    height: 200px;
    display: block;
    filter: opacity(0.5);
}
.shape-ex8 img{
    width: 100%;
    height: 100%;
    object-fit: contain;
}
saturate() - 飽和
展示
範例圖片
HTML
複製已複製
<div class="shape-ex9">
    <img src="https://www.great-good.tw/front/public/img/front/original/img-11.jpg" alt="範例圖片" />
</div>
CSS
複製已複製
.shape-ex9{
    width: 300px;
    max-width: 90%;
    margin: 0 auto;
    height: 200px;
    display: block;
    filter: saturate(50%);
}
.shape-ex9 img{
    width: 100%;
    height: 100%;
    object-fit: contain;
}
sepia() - 復古
展示
範例圖片
HTML
複製已複製
<div class="shape-ex10">
    <img src="https://www.great-good.tw/front/public/img/front/original/img-11.jpg" alt="範例圖片" />
</div>
CSS
複製已複製
.shape-ex10{
    width: 300px;
    max-width: 90%;
    margin: 0 auto;
    height: 200px;
    display: block;
    filter: sepia(100%);
}
.shape-ex10 img{
    width: 100%;
    height: 100%;
    object-fit: contain;
}
重疊使用
展示
範例圖片
HTML
複製已複製
<div class="shape-ex11">
    <img src="https://www.great-good.tw/front/public/img/front/original/img-11.jpg" alt="範例圖片" />
</div>
CSS
複製已複製
.shape-ex11{
    width: 300px;
    max-width: 90%;
    margin: 0 auto;
    height: 200px;
    display: block;
    filter: sepia(100%) drop-shadow(10px 10px 10px black);
}
.shape-ex11 img{
    width: 100%;
    height: 100%;
    object-fit: contain;
}
其他類別