colofilter.cssを使って画像にカラーフィルタを設定表示する方法｜DAD UNION

colofilter.cssを使って画像に色々なパターンのカラーフィルタを設定し、表示する方法をご紹介します。

Contents

colofilter.cssを使って画像にカラーフィルタを設定表示するCSSの記述
colofilter.cssを使って画像にカラーフィルタを設定表示するHTMLの記述
colofilter.cssを使って画像にカラーフィルタを設定表示するデモページ
ソース元：Colofilter.css

colofilter.cssを使って画像にカラーフィルタを設定表示するCSSの記述

※colofilter.cssファイルを読み込みます。画像表示エリア（div）には画像の縦横サイズを設定してます。必要に応じて変更して下さい。

<link href="colofilter.css" rel="stylesheet" type="text/css">
<style>
body{
  padding: 0;
  margin: 0;
  text-align: center;
}
h1{
  line-height:1.6em;
  text-align:center;
  font-weight:bold;
  padding: 15px 0 0 0;
  font-size: 18px;
}
h2{
  line-height:1.6em;
  text-align:center;
  font-weight:bold;
  padding: 40px 0 6px 0;
  font-size: 16px;
}
div{
  display: block;
  width: 800px;
  height: 533px;
  margin: 0 auto;
}
[class^="blend-"] {
  position: relative;
}
</style>

colofilter.cssを使って画像にカラーフィルタを設定表示するHTMLの記述

※カラーフィルタ設定前のオリジナル画像「1.jpg」を用意し、画像表示エリア（div）にclass=”カラーフィルタパターン”を記述します。カラーフィルタパターンは「ソース元：Colofilter.css」にあります。

<h1>colofilter.cssを使って画像にカラーフィルタを設定して表示</h1>

<h2>オリジナル画像</h2>
<div><img src="1.jpg"></div>

<h2>カラーフィルタを設定</h2>
<div class="blend-blue">
    <img src="1.jpg">
</div>
<div class="blend-blue-dark">
    <img src="1.jpg">
</div>
<div class="blend-orange">
    <img src="1.jpg">
</div>
<div class="blend-red-blue-light">
    <img src="1.jpg">
</div>