背景渐变不透明度不适用于样式化组件答案

【问题标题】：background gradient opacity not working with styled components背景渐变不透明度不适用于样式化组件
【发布时间】：2020-11-25 08:56:30
【问题描述】：

嘿，我正在使用样式化组件，我的全局样式有以下代码：

const GlobalStyle = createGlobalStyle`
    html{
        font-family: roboto;
        background: linear-gradient(45deg,rgba(137,255,255,0.5),rgba(161,252,143, 0.25), rgba(255,167,137, 1));
        height: 100vw;
        overflow: hidden;
    }`
export default GlobalStyle

由于某种原因，背景是正确的渐变颜色，但不透明度不适用于所述渐变色。我试过了，它在普通的 html/css 中运行良好，但由于某种原因在我的 nextjs 应用程序中没有。知道为什么它不起作用吗？

测试浏览器：firefox

【问题讨论】：

试试opacity: 0.5它应该可以工作。
不透明度：0.5；不起作用，因为渐变的每种颜色都有不同的不透明度

标签： css typescript next.js styled-components

【解决方案1】：

下面的代码 sn-p 可能对你有用。

这里有一个用于样式组件的官方 nextjs 示例https://github.com/vercel/next.js/blob/canary/examples/with-styled-components/pages/index.js

import styled from 'styled-components'

const GlobalStyle = styled.html`
  font-family: roboto;
  background: linear-gradient(45deg,rgba(137,255,255,0.5),rgba(161,252,143, 
  0.25), rgba(255,167,137, 1));
  height: 100vw;
  overflow: hidden;
  `
export default function StyledHtml({ children}) {
   return (<GlobalStyle>
       {children}
   </GlobalStyle >);
}

【讨论】：