【UI美化】分享一下界面美化的思路，顺便讲下可视化做法 - 『瀚思彼岸』» 智能家居技术论坛

type: entities #卡片类型：实体
entities: #实体
- entity: climate.xiaomi_m4_41b_air_conditioner #这些是空调的实体名称，具体你们可以自己看自己的
- entity: climate.xiaomi_m9_2ab_air_conditioner
- entity: climate.xiaomi_m9_23b_air_conditioner
- entity: climate.xiaomi_m9_284_air_conditioner
- entity: climate.xiaomi_c32_1a8_air_conditioner
header: #头部
type: picture #头部类型：图片
image: /local/kongtiaoka2.png #这是空调卡头部的图片位置，local是你的www文件夹
tap_action: #这些是点击的动作，不进行进一步解释了，可以通过可视化编辑器直接编辑
action: none
hold_action:
action: none
show_header_toggle: false
state_color: false
card_mod: #这是使用的card-mod集成
style: |
ha-card {
--ha-card-background:rgba(0, 0, 0, 0.2) ; /*卡片的背景，rgba(0, 0, 0, 0.2) 代表红、绿、蓝、透明度分别是0、0、0、0.2，如果需要白色透明就是300，300,300，0.2 这个0.2代表透明度是20%，看自己需要的效果可以调试这几个数字*/
color: rgba(300, 300, 300, 1); /*字体颜色，如上*/
backdrop-filter: blur(4px) /*给卡片加一层模糊效果，模糊半径是4像素*/
}

复制代码

type: custom:vertical-stack-in-card #类型是 vertical-stack-in-card
cards:
- type: picture #第一张卡类型是图片
image: local/ksh1.png #这是标题图片
- type: picture-elements #第二张卡类型是图片元素
image: local/fangjianan.png #卡的底图，这里用的是酷家乐渲染出来房间黑暗的图
elements: #元素
- type: image #类型图片
entity: switch.lumi_b2_left_switch_service #关联的实体这个是个开关
tap_action:
action: toggle #动作是切换
state_image:
'on': local/zhuwei2.png #打开时显示的图片，这个是酷家乐渲染的房间照亮的图，但是其他房间使用透明
'off': local/kong1.png #关闭时显示的图片，这个是个纯透明的图
style:
top: 50% #图片位置大小信息，如果房间图和底图尺寸一致，不用改这个数据
left: 50%
width: 100%
- type: image #类型图片这个跟上面一样，是另一个房间的图，就不详细解释了，其他房间的我也删除了，做的时候将这段复制粘贴进去，改实体和图片就行
entity: switch.lumi_b2la_right_switch_service
tap_action:
action: toggle
state_image:
'on': local/zhuwei1.png
'off': local/kong1.png
style:
top: 50%
left: 50%
width: 100%
- type: state-icon #类型按钮这个是按钮，上面的图片元素只是为了显示房间的状态，真正需要操控的是通过按钮实现
entity: light.yeelink_ceili_f9fe_light #关联的实体这个是个灯
icon: mdi:ceiling-light #图标的名称，这个也可以换，具体可以搜一下HA内置图标的名称
style: #图标的位置信息，这个需要手动调整至你的房间中TOP是上下，left是左右
top: 29%
left: 23%
- type: state-icon #类型按钮这个是按钮，跟上面的一致，其他的我就删了，做的时候将这段粘贴进去，改变实体和位置就行
entity: light.yeelink_ceiling23_0a34_light
icon: mdi:ceiling-light
style:
top: 29%
left: 42%
card_mod: #这里使用cardmod将背景调至透明，文字颜色白色，背景模糊
style: |
ha-card {
--ha-card-background:rgba(0, 0, 0,0.2) ;
color: rgba(300, 300, 300, 1);
backdrop-filter: blur(3px)}

复制代码