Линейный градиент по изображению с прозрачностью CSS - PullRequest
Новая
       88

Линейный градиент по изображению с прозрачностью CSS

1 голос
/ 21 июня 2020

У меня есть простое изображение .PNG с белой формой и прозрачным фоном. Это создается в. js. 

    var img = document.createElement("img");
    img.src = "Images/seed.png";
    img.classList.add("seed");
    document.getElementById("spiralDiv").appendChild(img);

Я хотел бы добавить линейный градиент к этой фигуре, изменив ее прозрачность. Я пробовал использовать обычный метод background: linear-gradient(rgba ..., но это дает также прозрачный фон изображения линейному градиенту, и я просто хочу, чтобы градиент применялся только к форме . Возможно, использование маски поможет?

Изменить цвет изображения PNG с помощью CSS? было полезно изменить только цвет формы, но я не уверен, как заставить его работать с градиентом.

Я не могу просто нарисовать форму градиентом в фотошопе, так как я также хотел бы изменить направление градиента в пределах javascript во время выполнения.

Исходное изображение с черным фоном

Исходное изображение с прозрачностью

Желаемый результат

(Извините пока не может публиковать изображения)

Ответы [ 2 ]

2 голосов
/ 21 июня 2020

из вашего связанного изображения, возможный вариант - сочетание filter и mix-blend-mode:

возможный пример: 

div {
  background: linear-gradient(to bottom left, #ff730f, #ff730f, #ffc69f, white) red;
  width: max-content;
}
div + div {background:linear-gradient(to   left, orange,gray,purple,gold,green,tomato,blue)}
img {
  display: block;
  mix-blend-mode: screen;
  filter: invert(100%);
}
body {display:flex}
<div><img src="https://i.imgur.com/8GlLI4B.png"></div>

<div><img src="https://i.imgur.com/8GlLI4B.png"></div>
1 голос
/ 21 июня 2020

Используйте изображение как маску, затем вы можете добавить фон в качестве окраски: 

.box {
  display: inline-block;
  width: 200px;
  background:linear-gradient(45deg,transparent,orange);
  -webkit-mask:url(https://i.ibb.co/PNtkhqg/iii.png) center/contain no-repeat;
          mask:url(https://i.ibb.co/PNtkhqg/iii.png) center/contain no-repeat;
}

img {
  display: block;
  width: 100%;
  opacity:0; /* no need to show the original image, it will simply define the size */
}

body {
  background: grey;
}
<div class="box"><img src="https://i.ibb.co/PNtkhqg/iii.png"></div>

Более упрощенный код на случай, если вы знаете соотношение изображения: 

.box {
  display: inline-block;
  width: 200px;
  background:linear-gradient(45deg,transparent,orange);
  -webkit-mask:url(https://i.ibb.co/PNtkhqg/iii.png) center/contain no-repeat;
          mask:url(https://i.ibb.co/PNtkhqg/iii.png) center/contain no-repeat;
}
.box::before {
  content:"";
  display:block;
  padding-top:100%;
}


body {
  background: grey;
}
<div class="box"></div>

Также так, если вы хотите, чтобы изображение оставалось видимым: 

.box {
  display: inline-block;
  width: 200px;
  position:relative;
}
.box::after {
  content:"";
  position:absolute;
  top:0;
  left:0;
  right:0;
  bottom:0;
  background:linear-gradient(45deg,transparent,orange);
  -webkit-mask:url(https://i.ibb.co/PNtkhqg/iii.png) center/contain no-repeat;
          mask:url(https://i.ibb.co/PNtkhqg/iii.png) center/contain no-repeat;
}
img {
  display: block;
  width: 100%;
}

body {
  background: grey;
}
<div class="box"><img src="https://i.ibb.co/PNtkhqg/iii.png"></div>

И с уловкой соотношения 

.box {
  display: inline-block;
  width: 200px;
  background:
   linear-gradient(45deg,transparent,orange),
   url(https://i.ibb.co/PNtkhqg/iii.png) center/contain no-repeat;
  -webkit-mask:url(https://i.ibb.co/PNtkhqg/iii.png) center/contain no-repeat;
          mask:url(https://i.ibb.co/PNtkhqg/iii.png) center/contain no-repeat;
}
.box::after {
  content:"";
  display:inline-block;
  padding-top:100%;
}
img {
  display: block;
  width: 100%;
}

body {
  background: grey;
}
<div class="box"></div>
...