『瀚思彼岸』» 智能家居技术论坛

标题: 怎么把picture-elements的背景图片变透明 [打印本页]

作者: samsss 时间: 2024-2-4 23:36
标题: 怎么把picture-elements的背景图片变透明
各位大佬路过帮忙瞧瞧：怎么把picture-elements里image图片（测试.png）里的白色区域变透明露出背后的背景呢，图片本身是透明的，放进来就变白色了：
配置是这样：
type: picture-elements
image: /local/house/测试.png
elements:
  - type: state-badge
entity: sensor.time
style:
   top: 32%
   left: 40%

作者: bbnomine 时间: 2024-2-6 10:26
这个是你没有底图，而你的主题默认是白色，你如果想做全屋可视化，代码可以参照homeassistant demo 中的代码
type: picture-elements
image: /assets/arsaboo/floorplans/main.png  #这个是底图，应该是全屋没有开灯的图
elements:
  - type: image                                  #这个是图片，是用来展示你灯亮和灯灭的图层
entity: input_boolean.abodeupdate    #这是监测的实体  你可以换成灯的实体
tap_action:
   action: toggle       #这个不用管，是监测切换的动作
state_image:
   'on': /assets/arsaboo/icons/abode_enabled.png #这是你需要放的半透明开灯的图
   'off': /assets/arsaboo/icons/abode_disabled.png #这是你需要放的一张全部透明没有内容的图
style:
   top: 4%          #这三行是位置和大小你如果底图和开灯图大小一致，应该三个数值都是50%
   left: 30%
   width: 7%
  - type: state-icon #这个是按钮，是你要放在图片中的，通过按钮才能控制灯
entity: input_boolean.abodeupdate    #这是监测的实体  你可以换成灯的实体
style:
   top: 5%                #这俩是位置参数，应该可以添加“width: ”这个参数，看需求
   left: 42%

以上是一个房间的代码，需要添加其他房间的时候，添加相应的图片图层和按钮图层就行了，从第四行以下开始添加，图层顺序跟代码有关，我记得好像是写到后面的代码是最顶层，所以按钮类代码要在图片类代码下面

作者: bbnomine 时间: 2024-2-6 10:34
说错了，是从第三行以下开始添加，https://demo.home-assistant.io 这个里面可以编辑他的图片模块来查看代码，摸索一下应该就知道怎么写了

作者: samsss 时间: 2024-2-6 11:33

bbnomine 发表于 2024-2-6 10:34
说错了，是从第三行以下开始添加，https://demo.home-assistant.io 这个里面可以编辑他的图片模块来查看 ...

谢谢回复哈，elements下面的图片是可以做到透明的，主要是之前的底图main.png弄不了；
不过我也找到办法，单独设置一个ios light 的theme就可以了

作者: bbnomine 时间: 2024-2-6 17:00
本帖最后由 bbnomine 于 2024-2-6 17:15 编辑

明白你要做什么了，这个教程应该是你需要的https://bbs.hassbian.com/thread-6019-1-1.html里面讲了如何通过
lovelace-card-modder插件来实现卡片透明和毛玻璃效果

作者: samsss 时间: 2024-2-6 22:33

bbnomine 发表于 2024-2-6 17:00
明白你要做什么了，这个教程应该是你需要的https://bbs.hassbian.com/thread-6019-1-1.html里面讲了如何通 ...

是的，谢谢

欢迎光临『瀚思彼岸』» 智能家居技术论坛 (https://bbs.hassbian.com/)