Размещение градиентного фона на изображении с прозрачным фоном

Чего я хотел бы добиться, так это того, чтобы градиент отображался на тексте, а не на фоне изображения. Я создал пример здесь: https://codepen.io/BenSagiStuff/pen/BaYKbNj

body{
  background: black;
}

img{
  padding: 30px;
  background: linear-gradient(to right, #E50000 8%, #FF8D00 28%, #FFEE00 49%, #008121 65%, #004CFF 81%, #760188  100%);
}

<img src = "https://upload.wikimedia.org/wikipedia/commons/9/95/Transparent_google_logo_2015.png" >

Как видите, в настоящее время фон изображения имеет градиент, но я бы хотел, чтобы текст «Google» имел градиент, а фон png оставался черным.

В конечном итоге цель состоит в том, чтобы градиентный переход был и под изображением, чтобы градиент также скользил горизонтально под изображением.

css svg

10.05.2022 15:02

Приемы CSS-макетирования - floats и Flexbox

Здравствуйте, друзья-студенты! Готовы совершенствовать свои навыки веб-дизайна? Сегодня в нашем путешествии мы рассмотрим приемы CSS-верстки - в...

Введение в CSS

CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.

Как выровнять Div по центру?

Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...

Навигация по приложениям React: Исчерпывающее руководство по React Router

React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

CSS: FlexBox

Ранее разработчики использовали макеты с помощью Position и Float. После появления flexbox сценарий полностью изменился.

Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

Ответ принят как подходящий

Используйте изображение в качестве маски для общего элемента

body{
  background: black;
}

.box{
  --img:url(https://upload.wikimedia.org/wikipedia/commons/9/95/Transparent_google_logo_2015.png);
  
  width:300px;
  aspect-ratio:3;
  background: linear-gradient(to right, #E50000 8%, #FF8D00 28%, #FFEE00 49%, #008121 65%, #004CFF 81%, #760188  100%);
  -webkit-mask: var(--img) 50%/cover;
          mask: var(--img) 50%/cover;
}

<div class = "box"></div>

10.05.2022 15:06

Есть небольшая проблема с вашей реализацией.

PNG прозрачный, но это квадратный фрагмент изображения. Возможно, вам удастся использовать изображение svg или просто применение этого градиентного фона в текстовом теге.

на вашем HTML вы делаете так:

<div>
<h1>Google</h1>
</div>

Ваш CSS таким образом

body{
  background: black;
  font-family:helvetica;
}

h1{
    background: linear-gradient(to right, #E50000 8%, #FF8D00 28%, #FFEE00 49%, #008121 65%, #004CFF 81%, #760188  100%);
   font-size: 160px;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
div {
  display:flex;
}

Это также лучше для производительности.

Кроме того, вы можете легко оживлять.

Например, в этом коде https://codepen.io/shshaw/pen/YpERQQ

10.05.2022 15:18