Добрый день!
Есть библиотека ColorThief. Есть переменная в CSS --background-gradient.
$(document).ready(function() {
var colorThief = new ColorThief();
$('.column img').each(function (index, element) {
var color = colorThief.getColor(element);
var rgba = "rgba("+ color +",.5)";
console.log(rgba);
document.querySelector(':root').style.setProperty
('--background-gradient', 'linear-gradient(to top,rgba(0,0,0,1),'+rgba+')');
});
console.log(rgba); сюда приходит массив из 3 значений, но почему-то в переменную --background-gradient попадает только последнее.
А должно быть, чтобы три элемента в разные цвета.
<div class="hero">
<div class="hero-head">
<h1 class="title has-text-centered is-uppercase is-spaced">Текст для темы</h1>
</div>
<div class="hero-body">
<div class="columns">
<div class="column">
<figure class="image is-3by2">
<img class="data-image" src="img/photo1.jpg">
<div class="shtora"></div>
<h3 class="subtitle">Текст на сколь-ко-то знаков</h3>
</figure>
</div>
<div class="column">
<figure class="image is-3by2">
<img class="data-image" src="img/photo2.jpg">
<div class="shtora"></div>
<h3 class="subtitle">Текст на сколь-ко-то знаков</h3>
</figure>
</div>
<div class="column">
<figure class="image is-3by2">
<img class="data-image" src="img/photo3.jpg">
<div class="shtora"></div>
<h3 class="subtitle">Текст на сколь-ко-то знаков</h3>
</figure>
</div>
</div>
</div>
</div>
:root {
--background-gradient: linear-gradient(to top,rgba(0,0,0,1),rgba(255,255,255,.3));
--foto-text-color: white;
--foto-text-shadow: black;
}
*{
margin: 0;
padding: 0;
}
.image {
position: relative;
overflow: hidden;
}
.data-image, .data-image1, .data-image2 {
transition: 1.5s;
z-index: 0;
}
.image:hover .data-image {
transform: scale(1.2);
transition: 1s;
}
.image:hover .data-image1 {
transform: scale(1.2);
transition: 1s;
}
.image:hover .data-image2 {
transform: scale(1.2);
transition: 1s;
}
.shtora {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: var(--background-gradient);
}
.image > h3 {
position: absolute;
left: 5%;
right: 5%;
bottom: 15%;
font-variant: small-caps;
text-shadow: 1px 1px 2px var(--foto-text-shadow);
z-index: 999;
color: var(--foto-text-color);
}