如何把lovelace card的背景透明？

lzzmn

请教一下，一个新手，没来得及系统的学习lovelace，想先体验一下成果，想把各个card的背景透明，这样能显示我选定的背景图片。

请各位高手路过给点指点。

另外也帮忙给一下lovelace的各个参数的系统学习链接。

先谢过了。

zxyny1989

使用主题呀。
另外坛子里有透明和毛玻璃的教程的

skiong

HACS 安装 ios-drak-mode这个主题，我到配置文件里面改动了卡片圆角，变得没那么圆，就接近ios的款式了

lzzmn

zxyny1989 发表于 2021-5-23 16:12
使用主题呀。
另外坛子里有透明和毛玻璃的教程的

毛玻璃那个，对老版本的才好用啊。新版本的不能用了。

goldstep

skiong 发表于 2021-5-23 20:05
HACS 安装 ios-drak-mode这个主题，我到配置文件里面改动了卡片圆角，变得没那么圆，就接近ios的款式了 ...

不装HACS，能有办法吗？

yinghu183

goldstep 发表于 2021-8-15 14:55
不装HACS，能有办法吗？

有个card-mod.js插件可以的  

goldstep

yinghu183 发表于 2021-8-15 19:21
有个card-mod.js插件可以的

搞定  多谢 ，手动的是麻烦要等一段时间才生效

隔壁的王叔叔

goldstep 发表于 2021-8-15 19:33
搞定  多谢 ，手动的是麻烦要等一段时间才生效

请问是如何搞定的呀？

sxrcm

skiong 发表于 2021-5-23 20:05
HACS 安装 ios-drak-mode这个主题，我到配置文件里面改动了卡片圆角，变得没那么圆，就接近ios的款式了 ...

请问兄弟你这个用的是哪个lovelace能实现这种状态高亮的？

skiong

sxrcm 发表于 2022-10-29 17:30
请问兄弟你这个用的是哪个lovelace能实现这种状态高亮的？

卡片用的是button-card，通过代码慢慢修改的

type: custom:button-card
entity: switch.sonoff_fd8da6
name: 主卧大灯
icon: 'off'
color_type: card
color: null
aspect_ratio: 1/1
state:
  - value: 'on'
    color: rgb(255 255 255)
  - value: 'off'
    styles:
      card:
        - filter: opacity(60%)
      icon:
        - filter: grayscale(100%)
show_state: true
style:
  top: 20.35%
  left: 41.31%
  width: 10%
custom_fields:
  icon_shade: >
    [[[ if (entity.state === 'on') return '<svg id="e7x4u4hifr771"
    xmlns="http://www.w3.org/2000/svg"
    xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 30 30"
    shape-rendering="geometricPrecision"
    text-rendering="geometricPrecision"><style><![CDATA[#e7x4u4hifr774 {
    animation-name: e7x4u4hifr774__tt, e7x4u4hifr774_c_o; animation-duration:
    1000ms; animation-fill-mode: forwards; animation-timing-function: linear;
    animation-direction: normal; animation-iteration-count: 1;   }@keyframes
    e7x4u4hifr774__tt { 0% {transform: translate(0px,0px) translate(0px,0px)}
    50% {transform: translate(0px,0px) translate(0px,0.500000px)} 100%
    {transform: translate(0px,0px) translate(0px,0px)} }@keyframes
    e7x4u4hifr774_c_o { 0% {opacity: 0} 100% {opacity: 1} }]]></style><g
    id="e7x4u4hifr772"><path id="e7x4u4hifr773"
    d="M11,2L11,7.674000C10.827000,7.735000,10.659000,7.811000,10.500000,7.902000C9.627000,8.408000,9.067000,9.319000,9.010000,10.326000C8.310000,10.478000,7.636000,10.683000,7,10.937000C3.906000,12.188000,2,14.499000,2,17L22,17C22,14.499000,20.094000,12.188000,17,10.937000C16.365000,10.684000,15.691000,10.479000,14.992000,10.328000C14.935000,9.320000,14.374000,8.408000,13.500000,7.902000C13.341000,7.812000,13.173000,7.736000,13,7.676000L13,2L11,2L11,2Z"
    fill="rgb(87,168,215)" stroke="none" stroke-width="1"/></g><g
    id="e7x4u4hifr774" transform="translate(0,0) translate(0,0)"
    opacity="0"><path id="e7x4u4hifr775"
    d="M9.019000,18.185000C9.019000,19.257000,9.591000,20.247000,10.519000,20.783000C11.447000,21.319000,12.591000,21.319000,13.519000,20.783000C14.447000,20.247000,15.019000,19.257000,15.019000,18.185000L9.019000,18.185000Z"
    fill="rgb(248,205,65)" stroke="none" stroke-width="1"/></g></svg> ' ;   
    else return '<svg id="e47a1uy8ttsc1" xmlns="http://www.w3.org/2000/svg"
    xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 30 30"
    shape-rendering="geometricPrecision"
    text-rendering="geometricPrecision"><style><![CDATA[#e47a1uy8ttsc4 {
    animation-name: e47a1uy8ttsc4__tt, e47a1uy8ttsc4_c_o; animation-duration:
    1000ms; animation-fill-mode: forwards; animation-timing-function: linear;
    animation-direction: normal; animation-iteration-count: 1;   }@keyframes
    e47a1uy8ttsc4__tt { 0% {transform: translate(0px,0px) translate(0px,0px)}
    50% {transform: translate(0px,0px) translate(0px,0.500000px)} 100%
    {transform: translate(0px,0px) translate(0px,0px)} }@keyframes
    e47a1uy8ttsc4_c_o { 0% {opacity: 1} 100% {opacity: 0.500000} }]]></style><g
    id="e47a1uy8ttsc2"><path id="e47a1uy8ttsc3"
    d="M11,2L11,7.674000C10.827000,7.735000,10.659000,7.811000,10.500000,7.902000C9.627000,8.408000,9.067000,9.319000,9.010000,10.326000C8.310000,10.478000,7.636000,10.683000,7,10.937000C3.906000,12.188000,2,14.499000,2,17L22,17C22,14.499000,20.094000,12.188000,17,10.937000C16.365000,10.684000,15.691000,10.479000,14.992000,10.328000C14.935000,9.320000,14.374000,8.408000,13.500000,7.902000C13.341000,7.812000,13.173000,7.736000,13,7.676000L13,2L11,2L11,2Z"
    fill="rgb(95,98,103)" stroke="none" stroke-width="1"/></g><g
    id="e47a1uy8ttsc4" transform="translate(0,0) translate(0,0)"><path
    id="e47a1uy8ttsc5"
    d="M9.019000,18.185000C9.019000,19.257000,9.591000,20.247000,10.519000,20.783000C11.447000,21.319000,12.591000,21.319000,13.519000,20.783000C14.447000,20.247000,15.019000,19.257000,15.019000,18.185000L9.019000,18.185000Z"
    fill="rgb(158,160,162)" stroke="none" stroke-width="1"/></g></svg>'; ]]]
styles:
  custom_fields:
    icon_shade:
      - top: 4%
      - left: 4.6%
      - width: 50%
      - position: absolute
      - null
  name:
    - justify-self: start
    - padding-top: 15px
    - padding-left: 6px
    - font-weight: null
    - text-transform: lowercase
    - font-size: 10px
  state:
    - justify-self: start
    - padding-left: 6px
    - font-weight: bold
    - text-transform: lowercase
    - font-size: 10px
    - color: rgb(111 111 111)
  icon:
    - color: rgb(255 160 0)
  template: light