@Nickita_K
Учусь Web-разработке, тапками сильно не кидайте...

Как вывести циклом значение и проставить в стили css?

Добрый день!
Есть библиотека 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);
}
  • Вопрос задан
  • 62 просмотра
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы