- <div id="image-wrap">
- <div id="upper"></div>
- </div>
- <div id="btn">
- <ul>
- <li><button id="darken">darken</button></li>
- <li><button id="multiply">multiply</button></li>
- <li><button id="color-burn">color-burn</button></li>
- <li><button id="lighten">lighten</button></li>
- <li><button id="screen">screen</button></li>
- <li><button id="color-dodge">color-dodge</button></li>
- <li><button id="overlay">overlay</button></li>
- <li><button id="soft-light">soft-light</button></li>
- <li><button id="hard-light">hard-light</button></li>
- <li><button id="difference">difference</button></li>
- <li><button id="exclusion">exclusion</button></li>
- <li><button id="hue">hue</button></li>
- <li><button id="saturation">saturation</button></li>
- <li><button id="color">color</button></li>
- <li><button id="luminosity">luminosity</button></li>
- </ul>
- </div>
- div#image-wrap {
- width:600px;
- height:370px;
- margin:10px auto;
- position:relative;
- background:url(img3/hana600.png);
- }
- div#upper {
- width:580px;
- height:350px;
- position:relative;
- background:#0460f8;
- top:10px;
- left:10px;
- mix-blend-mode: none;
- }
- $(function(){
- $("#darken").on('click',function(){
- $("#upper").css('mix-blend-mode','darken');
- $("#status").text('darken(比較・暗)');
- });
- /* 中略 */
- $("#luminosity").on('click',function(){
- $("#upper").css('mix-blend-mode','luminosity');
- $("#status").text('luminosity(輝度)');
- });
- });