nakome
4/26/2015 - 7:46 PM
CSS Element Background Blend Modes
CSS Element Background Blend Modes
body {
font-family: Arial, Helvetica, sans-serif;
background: lightgray;
}
#title {
font-size: 150%;
font-style: normal;
line-height: 120%;
font-weight: 700;
margin: 15px 0px 10px 12px;
padding: 10px 15px 8px 100px;
}
#header {
padding: 10px 15px 8px 20px;
}
#wrapper {
margin: 10px 15px 20px 20px;
border-radius: 30px;
width: 800px;
height: 600px;
background: url('http://farm6.staticflickr.com/5328/8959572482_2601c86c04_c.jpg') no-repeat center center fixed, rgba(0,55,99,1);
-webkit-background-size: cover;
background-size: cover;
background-blend-mode: normal, normal;
-webkit-background-blend-mode: normal, normal;
}
function blendModeChanged() {
var blendMode = document.getElementById("blendModesList").options[
document.getElementById("blendModesList").selectedIndex].value;
document.getElementById("wrapper").style.backgroundBlendMode = blendMode + ', normal';
document.getElementById("wrapper").style.webkitBackgroundBlendMode = blendMode + ', normal';
}
function backgroundColorChanged() {
var backgroundColor = document.getElementById("backgroundColorPicker").value;
document.getElementById("wrapper").style.backgroundColor = backgroundColor;
}
function backgroundImageChanged() {
var selectedImage = document.getElementById("backgroundImageList").options[
document.getElementById("backgroundImageList").selectedIndex];
var backgroundImage = selectedImage.value;
document.getElementById("wrapper").style.backgroundImage = "url(" + backgroundImage + ")";
}
function load() {
if (navigator.userAgent.indexOf('Chrome') === -1) {
$("#backgroundColorPicker").spectrum(
{color: "#f00",
showButtons: false,
change: function(color) {
document.getElementById("wrapper").style.backgroundColor = color.toHexString();
}});
}
document.getElementById("blendModesList").addEventListener("change", blendModeChanged, false);
document.getElementById("backgroundColorPicker").addEventListener("change", backgroundColorChanged, false);
document.getElementById("backgroundImageList").addEventListener("change", backgroundImageChanged, false);
}
<html>
<head>
<title>
HTML Element Background Blending Gallery
</title>
</head>
<body onload="load()">
<div id="title">CSS Background Blending Modes</div>
<div id="header">
<label>Blend Mode: </label>
<select id="blendModesList">
<option value="normal">normal</option>
<option value="multiply">multiply</option>
<option value="screen">screen</option>
<option value="overlay">overlay</option>
<option value="darken">darken</option>
<option value="lighten">lighten</option>
<option value="color-dodge">color-dodge</option>
<option value="color-burn">color-burn</option>
<option value="hard-light">hard-light</option>
<option value="soft-light">soft-light</option>
<option value="difference">difference</option>
<option value="exclusion">exclusion</option>
<option value="hue">hue</option>
<option value="saturation">saturation</option>
<option value="color">color</option>
<option value="luminosity">luminosity</option>
</select>
<label>Background color: </label>
<input id="backgroundColorPicker" type="color" value='#4499f0'>
<label>Background image: </label>
<select id="backgroundImageList">
<option value="http://farm6.staticflickr.com/5328/8959572482_2601c86c04_c.jpg">Waterfall</option>
<option value="http://farm4.staticflickr.com/3694/8959572838_57fa40bdb4_c.jpg">Seaside</option>
<option value="http://farm9.staticflickr.com/8266/8959572616_c47c510060_c.jpg">Sunset</option>
<option value="http://farm8.staticflickr.com/7371/8958376607_b8c6586c4b_c.jpg">Bridge</option>
<option value="http://farm8.staticflickr.com/7403/8958376269_d8b658fc2c_c.jpg">Mountains</option>
</select>
</div>
<div id="wrapper"></div>
</body>
</html>