<div id="container">
<div id="element"><h3>Множественные фоны</h3></div>
</div>
@import url("https://fonts.googleapis.com/css?family=Roboto:100,400,400i,700");
@import url("https://fonts.googleapis.com/css?family=Inconsolata:400,400i,700");
/* --- Стиль квадратного элемента --- */
#element {
background-blend-mode: normal, screen;
background-position: center;
background-repeat: round, no-repeat, no-repeat;
background-size: auto, cover, cover;
background-image: url('data:image/svg+xml,%3Csvg width="52" height="26" viewBox="0 0 52 26" xmlns="http://www.w3.org/2000/svg"%3E%3Cg fill="none" fill-rule="evenodd"%3E%3Cg fill="%23ffffff" fill-opacity="0.5"%3E%3Cpath d="M10 10c0-2.21-1.79-4-4-4-3.314 0-6-2.686-6-6h2c0 2.21 1.79 4 4 4 3.314 0 6 2.686 6 6 0 2.21 1.79 4 4 4 3.314 0 6 2.686 6 6 0 2.21 1.79 4 4 4v2c-3.314 0-6-2.686-6-6 0-2.21-1.79-4-4-4-3.314 0-6-2.686-6-6zm25.464-1.95l8.486 8.486-1.414 1.414-8.486-8.486 1.414-1.414z" /%3E%3C/g%3E%3C/g%3E%3C/svg%3E'), linear-gradient(to right, #e66465, #9198e5), url('https://images.unsplash.com/photo-1540056145750-91179d279b66?ixlib=rb-1.2.1&q=85&fm=jpg&crop=entropy&cs=srgb&ixid=eyJhcHBfaWQiOjE0NTg5fQ');
width: 90%;
height: 360px;
margin: 24px auto;
padding: 24px;
box-shadow: 0 1px 2px rgba(0,0,0,.2);
resize: both;
overflow: auto;
}
/* --- Стиль остальных элементов --- */
body {
font-family: Roboto;
background-color: #f5f5f5;
text-align: center;
}
#container {
margin-top: 24px;
}
h3 {
font-size: 24px;
font-weight: lighter;
text-transform: uppercase;
color: black;
padding: 16px;
margin: 24px;
background-color: rgba(255,255,255,.5);
}
jQuery(document).ready(function($){
$('[name="mode"]').on('change', function(){
$('#element').css({
'background-blend-mode': $(this).val()
})
});
});
This Pen doesn't use any external CSS resources.