Opacity only background image

Configuration Frontend
1

Hi, I want set my cover card with an image a little bit opache.
I managed to set the opacity, but to the whole card.
image

This is the code:

type: entities
show_header_toggle: false
card_mod:
  style: |
    ha-card {
        background: url('/local/tapparella.jpg');
        background-size: 100% 200px;
          opacity: 0.6;
        }
    }
entities:
  - type: custom:cover-position-preset-row
    entity: cover.balcone
    reverseButtons: false
    width: 36px
    customSetpoints: true
    openPosition: 99
    midOpenPosition: 82
    midClosePosition: 51
    closePosition: 0
    customTheme: true
  - entity: cover.balcone
    name: ' '
    icon: ' '
    card_mod:
      style: |
        :host { 
          color: blue;

I want set the opacity only the image in background.

Can you help me?

Thanks

2

Why not just upload a background pic that already has an adjusted opacity?

3

May be a solution, but if I need to modify the opacity I have to change it everytile directly on the image. But thanks for alternatiy.

4

Thought about your issue. One method is to make a pseudo-element the same size as the parent and add opacity to that.

image
image920×320 26.9 KB

Here is an example:

type: custom:mushroom-template-card
entity: cover.bedroom_curtains
icon: mdi:blinds-horizontal
icon_color: ' '
primary: Test
card_mod:
 style: |
      ha-card {
        height: 140px !important;
        color: lime;
        }
      ha-card:after {    
      content: "";
      background-image: url('/local/pics/space.png');
      background-size: cover;
      position: absolute;
      right: 0px;
      bottom: 0px;
      left: 0px;
      height:140px;
      opacity: 0.2;
            }