uni-app 3.2.9 css样式background-image属性渐变样式无效

uni-app 3.2.9 css样式background-image属性渐变样式无效

开发环境 版本号 项目创建方式
Windows 10 3.2.9 HBuilderX

产品分类：uniapp/H5

示例代码：

<style lang="scss">
.expert-detail-header {
background-image: $app-blue-gradient;
}
</style>  
uni.scss
$app-blue-gradient: radial-gradient(top left, circle, #0050b3 25%, #002766);

操作步骤：

<style lang="scss">
.expert-detail-header {
background-image: $app-blue-gradient;
}
</style>  
uni.scss
$app-blue-gradient: radial-gradient(top left, circle, #0050b3 25%, #002766);

预期结果：

.expert-detail-header {
background-image: -webkit-radial-gradient(top left,circle,#0050b3 25%,#002766);
}

实际结果：

.expert-detail-header {
background-image: radial-gradient(top left, circle, #0050b3 25%, #002766);
}

bug描述：

<style lang="scss">
.expert-detail-header {
background-image: $app-blue-gradient;
}
</style>  
uni.scss
$app-blue-gradient: radial-gradient(top left, circle, #0050b3 25%, #002766);

更多关于uni-app 3.2.9 css样式background-image属性渐变样式无效的实战教程也可以访问 https://www.itying.com/category-93-b0.html

1 回复

更多关于uni-app 3.2.9 css样式background-image属性渐变样式无效的实战教程也可以访问 https://www.itying.com/category-93-b0.html


在 uni-app 3.2.9 中，SCSS 变量中的 CSS 渐变语法可能因预处理器编译导致兼容前缀缺失。这是由于 SCSS 编译器不会自动为 CSS 渐变添加 -webkit- 等前缀，而部分浏览器（尤其是 WebKit 内核）需要前缀才能正确渲染。

解决方案：

  1. 直接使用 CSS 渐变：在样式表中直接写入带前缀的渐变代码，避免通过 SCSS 变量传递。
    .expert-detail-header {
  background-image: -webkit-radial-gradient(top left, circle, #0050b3 25%, #002766);
  background-image: radial-gradient(top left, circle, #0050b3 25%, #002766);
}
回到顶部