Microsoft Fluent Design 透明度 [重复]答案

【问题标题】：Microsoft Fluent Design transparency [duplicate]Microsoft Fluent Design 透明度 [重复]
【发布时间】：2017-07-03 19:24:46
【问题描述】：

如何使用 CSS 或其他工具创建 Microsoft Fluent Design 透明度？我喜欢这种设计语言，并想在我的网页中添加一些元素。

【问题讨论】：

标签： transparency webpage web-platforms fluent-design

【解决方案1】：

使用在 ReactJS 中实现 Fluent Design 的 Github 项目之一：

例如：

import * as React from "react";
import * as ReactDOM from "react-dom";
import { Theme as UWPThemeProvider, getTheme } from "react-uwp/Theme";
import MyComponent from "./MyComponent";

export class App extends React.Component<void, void> {
  render() {
    return (
      <UWPThemeProvider
        theme={getTheme({
 themeName: "dark", // set custom theme
 accent: "#0078D7", // set accent color
 useFluentDesign: true, // sure you want use new fluent design.
 desktopBackgroundImage: "http://127.0.0.1:8092/staticimages/jennifer-bailey-10753.jpg" // set global desktop background image
        })}
      >
        <MyComponent />
      </UWPThemeProvider>
    )
  }
}
ReactDOM.render(
  <App />,
  document.getElementById("app")
);

./MyComponent.js

import * as React from "react";
import Button from "react-uwp/Button";

export default class MyComponent extends React.Component<void, void> {
  render() {
    return (
      <Button tooltip="Mini Tooltip" />
    )
  }
}

参考文献

【讨论】：

【解决方案2】：

您可以将此库用于 Fluent Design System 中的显示效果。而且你需要等待backdrop-filter CSS 支持背景模糊效果（Safari 和 Edge 支持-webkit-backdrop-filter）。

https://github.com/d2phap/fluent-reveal-effect

【讨论】：

请不要对多个不同的问题发布相同的答案，例如you did here。相反，请考虑投票/标记以关闭一个问题作为另一个问题的重复。