CSS blend

Obrázek krajina káva moře koncert louka

Barva na pozadí

Typ background-blend-mode:

<style>
.blend {
    background-image: url(http://jecas.cz./files/blend/1.jpg);
    width: 100%;
    height: 0;
    padding-top: 50%;
    background-color: #0D6AB7;
    background-size: cover;
}

.blend-obal ul {list-style: none; padding: 0;}
.blend-obal li {display: inline}
.blend-obal label {white-space: nowrap;}
</style>

<p><label>Obrázek
    <select onchange="blendTest.style.backgroundImage = 'url(http://jecas.cz./files/blend/' + this.value + '.jpg)'">
        <option value="1">krajina</option>
        <option value="2">káva</option>
        <option value="3">moře</option>
        <option value="4">koncert</option>
        <option value="5">louka</option>
    </select>
</label></p>
<p><label>Barva na pozadí <input type="color" value="#0D6AB7" onchange="blendTest.style.backgroundColor = this.value"></label></p>

<p>Typ <code>background-blend-mode</code>:</p>
<div class="blend-obal" id="blend-obal">
<ul>
<li id="normal"><label><input type="checkbox" name="normal"> <code>normal</code></label></li>
<li id="multiply"><label><input type="checkbox" name="multiply"> <code>multiply</code></label></li>
<li id="screen"><label><input type="checkbox" name="screen"> <code>screen</code></label></li>
<li id="overlay"><label><input type="checkbox" name="overlay"> <code>overlay</code></label></li>
<li id="darken"><label><input type="checkbox" name="darken"> <code>darken</code></label></li>
<li id="lighten"><label><input type="checkbox" name="lighten"> <code>lighten</code></label></li>
<li id="color-dodge"><label><input type="checkbox" name="color-dodge"> <code>color-dodge</code></label></li>
<li id="color-burn"><label><input type="checkbox" name="color-burn"> <code>color-burn</code></label></li>
<li id="hard-light"><label><input type="checkbox" name="hard-light"> <code>hard-light</code></label></li>
<li id="soft-light"><label><input type="checkbox" name="soft-light"> <code>soft-light</code></label></li>
<li id="difference"><label><input type="checkbox" name="difference"> <code>difference</code></label></li>
<li id="exclusion"><label><input type="checkbox" name="exclusion"> <code>exclusion</code></label></li>
<li id="hue"><label><input type="checkbox" name="hue"> <code>hue</code></label></li>
<li id="saturation"><label><input type="checkbox" name="saturation"> <code>saturation</code></label></li>
<li id="color"><label><input type="checkbox" name="color"> <code>color</code></label></li>
<li id="luminosity"><label><input type="checkbox" name="luminosity"> <code>luminosity</code></label></li>
</ul>
</div>

<div class="blend" id="blend-test">
</div>
<script>
var blendTest = document.getElementById('blend-test');
(function() {
var policka = document.getElementById('blend-obal').getElementsByTagName("input");

for (var i = policka.length; i--; ) {
    policka[i].onchange = namichat;
}

function namichat() {
    var blendMode = [];
    for (var i = policka.length; i--; ) {
        if (policka[i].checked) {
            blendMode.push(policka[i].name);
        }
    }
    blendTest.style.backgroundBlendMode = blendMode.join(",");
}
    
})();
</script>