uni-app uniappx中backgroundImage 不能使用图片 也不能使用颜色变量

uni-app uniappx中backgroundImage 不能使用图片 也不能使用颜色变量

开发环境 版本号 项目创建方式
Windows 10 企业版 LTSC 21H2 HBuilderX

产品分类：uniapp/App

PC开发环境操作系统：Windows

HBuilderX类型：正式

HBuilderX版本号：4.85

手机系统：Android

手机系统版本号：Android 16

手机厂商：小米

手机机型：红米K70至尊

页面类型：vue

vue版本：vue3

打包方式：云端

项目创建方式：HBuilderX

示例代码：

.theme-light {  
    --primaryColorbg3: #ffd6a3;  
    --baseColor: #FAF7F5;  
}

<template>  
    <view class="login-container" :class="themeState.theme">  
        <!-- <button @click="change()">1111</button> -->  
    </view>  
</template>  

<script setup lang="uts">  
    import { themeState, setTheme } from '@/store/theme.uts'  

    const color = '#ffd6a3'  

    function change() {  
        setTheme(themeState.theme == 'theme-dark' ? 'theme-light' : 'theme-dark')  
    }  
</script>  

<style lang="scss">  
    .login-container {  
        width: 750rpx;  
        height: 1624rpx;  
        background-image: linear-gradient(180deg, var(--primaryColorbg3) -10%, var(--baseColor) 30%);  
    }  
</style>

操作步骤：

<template>  
    <view class="login-container" :class="themeState.theme">  
        <!-- <button @click="change()">1111</button> -->  
    </view>  
</template>  

<script setup lang="uts">  
    import { themeState, setTheme } from '@/store/theme.uts'  

    const color = '#ffd6a3'  

    function change() {  
        setTheme(themeState.theme == 'theme-dark' ? 'theme-light' : 'theme-dark')  
    }  
</script>  

<style lang="scss">  
    .login-container {  
        width: 750rpx;  
        height: 1624rpx;  
        background-image: linear-gradient(180deg, var(--primaryColorbg3) -10%, var(--baseColor) 30%);  
    }  
</style>

.theme-light {  
    --primaryColorbg3: #ffd6a3;  
    --baseColor: #FAF7F5;  
}

更多关于uni-app uniappx中backgroundImage 不能使用图片 也不能使用颜色变量的实战教程也可以访问 https://www.itying.com/category-93-b0.html

1 回复

更多关于uni-app uniappx中backgroundImage 不能使用图片 也不能使用颜色变量的实战教程也可以访问 https://www.itying.com/category-93-b0.html


在uni-app x中，CSS变量在部分样式属性中的支持确实存在限制。你遇到的background-image无法使用CSS变量的问题，是因为uni-app x的样式解析机制与Web标准存在差异。

目前可行的解决方案是：

  1. 使用动态样式绑定：将渐变颜色通过style绑定动态设置
<template>
    <view class="login-container" 
          :class="themeState.theme"
          :style="{
            backgroundImage: `linear-gradient(180deg, ${themeColors.primaryColorbg3} -10%, ${themeColors.baseColor} 30%)`
          }">
    </view>
</template>

<script setup lang="uts">
    import { themeState, setTheme } from '@/store/theme.uts'
    
    const themeColors = $ref({
        primaryColorbg3: '#ffd6a3',
        baseColor: '#FAF7F5'
    })
    
    // 监听主题变化更新颜色
    $watch(() => themeState.theme, (newVal) => {
        if(newVal === 'theme-light') {
            themeColors.primaryColorbg3 = '#ffd6a3'
            themeColors.baseColor = '#FAF7F5'
        } else {
            // 设置暗色主题颜色
            themeColors.primaryColorbg3 = '#333333'
            themeColors.baseColor = '#000000'
        }
    })
</script>

<style lang="scss">
    .login-container {
        width: 750rpx;
        height: 1624rpx;
    }
</style>
  1. 预定义多个主题类：为不同主题预先定义完整的样式
.theme-light .login-container {
    background-image: linear-gradient(180deg, #ffd6a3 -10%, #FAF7F5 30%);
}

.theme-dark .login-container {
    background-image: linear-gradient(180deg, #333333 -10%, #000000 30%);
}
回到顶部