Замена изображений через CSS

Question

Я работаю над созданием оверлея потока, используя пользовательский CSS поверх потокового набора Discord. Если вы незнакомы, это приведет к прозрачному размещению людей, говорящих на ваших каналах разногласий их аватаров. Я пытаюсь изменить это с помощью CSS в OBS, и я сталкиваюсь с ошибкой

html довольно прост

<ul class="voice-states" data-reactid=".0.0.0"><li class="voice-state" data reactid=".0.0.0.$133103869378035712/=1$133103869378035712">
<img class="avatar" src="https://cdn.discordapp.com/avatars/133103869378035712/6819c76e3ea0cbc2c9cb22566994831f.jpg" data-reactid=".0.0.0.$133103869378035712/=1$133103869378035712.$=10">

Так что заменить изображение, которое я использовал

.voice-state  img
{
content: url("https://i.imgur.com/b1jD5Yd.jpg");
}

для замены картинки, но проблема в том, что с несколькими голосовыми состояниями используется, когда в канале находится более одного человека, и дифференцируется атрибутом data-reactid, потому что сейчас он заменяет все аватары этим изображением и я пытаюсь выяснить способ замены аватаров индивидуально из атрибута.

Спасибо

Answer 1

Тогда вы можете попробовать стилизовать изображения по атрибутам данных, если вы знаете идентификаторы, и они не меняются. Чтобы изображение отображалось поверх аватара, установите z-index, который выше, чем изображение аватара.

[data-reactid="ID001"],
[data-reactid="ID002"] {
 background-image: url("image.jpg");
 position: relative;
 z-index: 1; 
}