Grayout a background

Setup, Configuration and Use Widgets
1

Hello,

I have widget

uid: Cell_Card_Activity
tags: []
props:
  parameters:
    - description: Small title on top of the card
      label: Title
      name: title
      required: false
      type: TEXT
    - description: Header big sized
      label: Header
      name: header
      required: false
      type: TEXT
    - description: Icon on top of the card (only f7 icons (without f7:))
      label: Icon
      name: icon
      required: false
      type: TEXT
    - description: rgba or HEX
      label: Background Color
      name: bgcolor
      required: false
      type: TEXT
    - context: item
      description: Item to control
      label: Item
      name: item
      required: false
      type: TEXT
    - label: Command to send
      name: command
      required: false
      type: TEXT
  parameterGroups: []
timestamp: Apr 30, 2024, 7:10:53 AM
component: f7-card
config:
  style:
    background: url(/static/images/sunrisedayphase.png)
    border-radius: var(--f7-card-expandable-border-radius)
    box-shadow: 5px 5px 10px 1px rgba(0,0,0,0.1)
    class:
      - padding: 0px
    height: 120px
    margin-left: 5px
    margin-right: 5px
    noShadow: false
slots:
  content:
    - component: f7-block
      config:
        style:
          display: flex
          flex-direction: row
          left: 16px
          position: absolute
          top: -5px
      slots:
        default:
          - component: f7-icon
            config:
              f7: =props.icon
              size: 18
              style:
                margin-right: 10px
              visible: "=props.icon ? true : false"
          - component: Label
            config:
              style:
                font-size: 12px
                margin-top: 0px
              text: "=props.title ? props.title : ''"
    - component: f7-block
      config:
        style:
          bottom: -15px
          flex-direction: row
          left: 16px
          position: absolute
      slots:
        default:
          - component: Label
            config:
              style:
                font-size: 17px
                font-weight: 600
                margin-left: 0px
                margin-top: 0px
              text: "=props.header ? props.header : 'Set Props'"
    - component: oh-link
      config:
        action: command
        actionCommand: =props.command
        actionFeedback: Done!
        actionItem: =props.item
        style:
          actionPosition: center
          height: 100px
          left: 0
          position: absolute
          top: 0
          width: 100%

is it possible to grey out the background somehow?

I tried it with

filter: grayscale(100%);

but it was not possible

2

There’s actually no way to do this directly with css. filter always applies to the whole element and it’s children and there’s no property to just filter the background of an element. There are many different workarounds with various levels of complexity.

I think, in your situation, the simple blend-mode trick will work. You can have more than one background for an element and the background-blend-mode determines how those backgrounds are combined. So, you can add a second background that has 0 saturation (such as a gradient that goes from black to black) and then blend those two backgrounds based on the saturation property.

component: f7-card
config:
  style:
    background: linear-gradient(black, black), url(/static/images/sunrisedayphase.png)
    background-blend-mode: saturation