[CSS] Gradient sur une background-image

Entraide Home Assistant
1

Bonjour à tous !

Je cherche depuis quelques jours à améliorer un peu la tuile « personne » que je trouve déjà très cool mais à laquelle je voulais ajouter quelques petites choses.

J’ai voulu faire en sorte que cette tuile se modifie quand un des habitants de la maison joue à la PlayStation et à quel jeu il joue. A l’aide de PS5toMQTT j’ai donc récupéré les infos que je voulais afficher et j’ai réussi à faire une tuile que je trouve plutôt jolie au niveau du rendu compte tenu de mon médiocre niveau en développement et encore plus en CSS:

Capture d’écran 2024-11-23 à 02.51.05

L’ennui c’est que lorsque je passe en Dark Mode ça donne ça:

Capture d’écran 2024-11-23 à 02.54.00

Et comme je l’ai dit, je n’ai absolument aucune connaissance en CSS. J’ai réussi à bidouiller ça en cherchant des bouts de CSS à droite à gauche. Voici le code CSS de ma carte:

      ha-card {
        background: linear-gradient(to left, transparent 50%, white), no-repeat,
        url({{ state_attr('sensor.playstation_5_activity', 'title_image') }});
        background-size: 56px;
        background-repeat: no-repeat, repeat;
        background-position: right;
      }

Existe-t-il un moyen d’utiliser un gradient vraiment transparent sur un background et non pas de simplement appliquer un blanc comme sur mon exemple ?

Mon autre solution serait à la rigueur de chercher à récupérer l’info « est-ce que darkmode est actif ? » si oui de faire un gradient qui part du noir et non du blanc… Mais je trouve pas ça super propre…

Si quelqu’un a une idée ? Merci d’avance !

Ma configuration

[center]## System Information

version core-2024.11.3
installation_type Home Assistant OS
dev false
hassio true
docker true
user root
virtualenv false
python_version 3.12.4
os_name Linux
os_version 6.6.54-haos
arch aarch64
timezone Europe/Paris
config_dir /config
Home Assistant Community Store
GitHub API ok
GitHub Content ok
GitHub Web ok
HACS Data ok
GitHub API Calls Remaining 5000
Installed Version 2.0.1
Stage running
Available Repositories 1518
Downloaded Repositories 21
Home Assistant Cloud
logged_in false
can_reach_cert_server ok
can_reach_cloud_auth ok
can_reach_cloud ok
Home Assistant Supervisor
host_os Home Assistant OS 13.2
update_channel stable
supervisor_version supervisor-2024.11.4
agent_version 1.6.0
docker_version 27.2.0
disk_total 146.9 GB
disk_used 7.5 GB
healthy true
supported true
host_connectivity true
supervisor_connectivity true
ntp_synchronized true
virtualization kvm
board generic-aarch64
supervisor_api ok
version_api ok
installed_addons Matter Server (6.6.0), Get HACS (1.3.1), File editor (5.8.0), Node-RED (18.1.1), Advanced SSH & Web Terminal (19.0.0), Mosquitto broker (6.4.1), Zigbee2MQTT (1.41.0-1), Govee to MQTT Bridge (2024.07.13-82ddc6e9), PS5 MQTT (1.4.0)
Dashboards
dashboards 7
resources 16
views 7
mode storage
Recorder
oldest_recorder_run 14 novembre 2024 à 02:21
current_recorder_run 23 novembre 2024 à 18:05
estimated_db_size 199.70 MiB
database_engine sqlite
database_version 3.45.3
[/center]
2

Voici un exemple de ce que tu veux faire. J’ai mis un carré de 50x50px rouge pour l’exemple, je te laisse adapter à ton besoin, en remplaçant background-color par background puis le lien de ton image :

<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Gradient de transparence</title>
    <style>
        .image-gradient {
            width: 50px;
            height: 50px;
            background-color: red;
            background-size: cover;
            -webkit-mask-image: linear-gradient(to left, rgba(0, 0, 0, 1) 50%, rgba(0, 0, 0, 0) 100%);
            mask-image: linear-gradient(to left, rgba(0, 0, 0, 1) 50%, rgba(0, 0, 0, 0) 100%);
        }
    </style>
</head>
<body>
    <div class="image-gradient"></div>
</body>
</html>
3

Tout d’abord, merci infiniment pour ton aide.

Ta solution semble fonctionner sauf que du coup ça redimensionne l’ensemble de ma tuile et la pochette du jeu se retrouve derrière l’icône de l’entité alors que je souhaiterais qu’elle reste sur le bord droit de celle ci et que le gradient ne s’applique que sur elle.

Le mieux que j’obtienne c’est ça:
Capture d’écran 2024-11-24 à 01.10.06

avec ce code:

      ha-card {
        background-image: url({{ state_attr('sensor.playstation_5_activity', 'title_image') }});
        background-size: 56px;
        background-repeat: no-repeat, repeat;
        background-position: right;
        -webkit-mask-image: linear-gradient(to right, rgba(0, 0, 0, 1) 50%, rgba(0, 0, 0, 0) 100%);
        mask-image: linear-gradient(to left, rgba(0, 0, 0, 1) 50%, rgba(0, 0, 0, 0) 100%);
      }

et ça:
Capture d’écran 2024-11-24 à 01.11.46

Si je définis une taille comme tu l’as fait:

      ha-card {
        height: 50px;
        width: 50px;
        background-image: url({{ state_attr('sensor.playstation_5_activity', 'title_image') }});
        background-size: 56px;
        background-repeat: no-repeat, repeat;
        background-position: right;
        -webkit-mask-image: linear-gradient(to right, rgba(0, 0, 0, 1) 50%, rgba(0, 0, 0, 0) 100%);
        mask-image: linear-gradient(to left, rgba(0, 0, 0, 1) 50%, rgba(0, 0, 0, 0) 100%);
      }

Mais rien qui ne ressemble à ce que j’ai réussi à faire en light-mode :frowning:
Et si j’utilises background au lieu de background-image comme tu me l’as conseillé, la couleur de fond de la tuile devient noir et ne correspond plus au gris très foncé des autres tuiles HA en dark mode

4

J’ai réussi à avoir un peu mieux, cette fois ci le gradient est à droite comme voulu mais part du bord droit de l’image et non du bord gauche
Capture d’écran 2024-11-24 à 01.22.04

    {% if state_attr('sensor.playstation_5_activity','activity') == 'playing' %}
      ha-card {
        background-image: url({{ state_attr('sensor.playstation_5_activity', 'title_image') }});
        background-size: 56px;
        background-repeat: no-repeat, repeat;
        background-position: right;
        -webkit-mask-image: linear-gradient(to right, rgba(0, 0, 0, 1) 50%, rgba(0, 0, 0, 0) 100%);
        mask-image: linear-gradient(to right, rgba(0, 0, 0, 1) 50%, rgba(0, 0, 0, 0) 100%);
      }
5

En répondant depuis mon tel (donc sans tester), tu dois pouvoir t’en sortir en jouant avec les %

6

Bein le problème n’est pas le pourcentage d’opacité, le souci c’est que je n’arrive à faire débuter le gradient que soit:

  • du bord gauche de la tuile
  • du bord droit de la tuile

Alors que ce que je voudrais c’est que ça démarre du bord gauche de l’image en background, pas du bord gauche de la tuile…

7

Petite correction, c’est no-repeat ou repeat mais pas les deux !

Bob

8

Ouais, j’avais fait plein de modifs et j’ai pas remis comme il faut… Pas très utile au problème mais bon merci quand même

9

Bon bein j’ai enfin trouvé comment faire ! J’ai découvert qu’il existait une propriété en CSS permettant de reconnaitre si le navigateur était en light ou dark mode. Et donc je stylise ma carte en fonction du mode:

      @media (prefers-color-scheme: dark) {
        ha-card {
          background: linear-gradient(to right, #1b1b1c, transparent),
          url({{ state_attr('media_player.sebby_ps5', 'entity_picture') }}), #1b1b1c;
          background-size: 56px;
          background-repeat: no-repeat;
          background-position: right;
        }
      }
      @media (prefers-color-scheme: light) {
        ha-card {
          background: linear-gradient(to left, transparent 50%, white),
          url({{ state_attr('media_player.sebby_ps5', 'entity_picture') }});
          background-size: 56px;
          background-repeat: no-repeat;
          background-position: right;
        }
      }

Merci à ceux qui ont essayé de m’aider :slight_smile: En espérant que ça serve à d’autres

1 « J'aime »