Как смешать изменения цвета

Question

У меня есть два разных div, один с изображением и один с сплошным цветом. Как бы я их смешал, чтобы изменения не были заметны?

HTML:

<div class="content1"> 
<h3 class="text1">Our Latest Album<span class="slash"> / </span><span class="text2">Fresh from the house of Music Club Band</span></h3> 
</div> 
<div class="album"> 
    <div class="album1"><img src="http://www.thefreeloves.com/prototype/test/wp-content/uploads/2015/02/FDA9133-650x385.jpg" alt="album1"></div> 
    <div class="album2"><img src="http://www.thefreeloves.com/prototype/test/wp-content/uploads/2015/02/FDA9099-650x385.jpg" alt="album2"></div> 
    <div class="album3"><img src="http://www.thefreeloves.com/prototype/test/wp-content/uploads/2015/02/FDA0373-650x385.jpg" alt="album3" class="album4"></div> 
</div> 

CSS:

.content1 { 
    background-image: url("http://www.thefreeloves.com/prototype/test/wp-content/uploads/2014/02/album-title.jpg"); 
    color: white; 
    text-align: center; 
    width: 100%; 
    height: 20%; 
    display: block; 
    float: left; 
} 

.text1 { 
    font-family: "Goudy Old Style", Optima, sans-serif; 
    font-size: 40px; 
    margin-bottom: 0; 
    margin-top: 45px; 
} 

.text2 { 
    font-size: 30px; 
    color: #6CB9D9; 
} 


.album1 { 
    float: left; 
    display: inline-block; 
    width: 31%; 
    text-align: center; 
    margin-right: 35px; 
    margin-left: 25px; 
    opacity: 1; 
    transition: opacity 0.3s ease-in; 
} 

.album1:hover { 
    opacity: 0.5; 
    transition: opacity 0.3s ease-in; 
} 

.album2{ 
    display: inline-block; 
    width: 31%; 
    text-align: center; 
    opacity: 1; 
    transition: opacity 0.3s ease-in; 
} 

.album2:hover { 
    opacity: 0.5; 
    transition: opacity 0.3s ease-in; 
} 

.album3 { 
    float: right; 
    display: inline-block; 
    width: 31%; 
    text-align: center; 
    margin-left: 20px; 
    margin-right: 20px; 
    opacity: 1; 
    transition: opacity 0.3s ease-in; 
} 

.album3:hover { 
    opacity: 0.5; 
    transition: opacity 0.3s ease-in; 
} 

.album { 
    width: 100%; 
    overflow: hidden; 
    background-color: #191919; 
} 

.album img { 
    width: 100%; 
} 

Потому что мой пост в основном код: Подробнее Подробнее Подробнее Подробнее Подробнее Подробнее

Answer 1

Вы ку ld используйте градиент CSS, сконфигурированный таким образом, чтобы первая часть была сплошной и остаточные переходы.

/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#1e5799+0,7db9e8+100&1+0,0.7+48,0+100 */ 
background: -moz-linear-gradient(top, rgba(30,87,153,1) 0%, rgba(76,134,191,0.7) 48%, rgba(125,185,232,0) 100%); /* FF3.6+ */ 
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(30,87,153,1)), color-stop(48%,rgba(76,134,191,0.7)), color-stop(100%,rgba(125,185,232,0))); /* Chrome,Safari4+ */ 
background: -webkit-linear-gradient(top, rgba(30,87,153,1) 0%,rgba(76,134,191,0.7) 48%,rgba(125,185,232,0) 100%); /* Chrome10+,Safari5.1+ */ 
background: -o-linear-gradient(top, rgba(30,87,153,1) 0%,rgba(76,134,191,0.7) 48%,rgba(125,185,232,0) 100%); /* Opera 11.10+ */ 
background: -ms-linear-gradient(top, rgba(30,87,153,1) 0%,rgba(76,134,191,0.7) 48%,rgba(125,185,232,0) 100%); /* IE10+ */ 
background: linear-gradient(to bottom, rgba(30,87,153,1) 0%,rgba(76,134,191,0.7) 48%,rgba(125,185,232,0) 100%); /* W3C */ 
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#1e5799', endColorstr='#007db9e8',GradientType=0); /* IE6-9 */ 

Существует также режим смешивания CSS, но поддержка варьируется. http://caniuse.com/#search=blend-mode