回到所有的课程
课程库

使用混合模式剪辑内容

使用混合模式剪辑div块中的黑色和白色内容。

本视频采用了旧的用户界面。更新版本即将到来!
克隆这个项目

变亮和变暗的混合模式就像饼干切割器一样,从设计中的黑色或白色元素中拿走原始填充,让背景通过这些元素显示出来。你可以把你想要的任何背景——纯色、图片,甚至视频——都可以通过元素显示出来。

首先,添加一个部分到画布上。然后,巢背景视频视频元素而且一个Div块部分.最后,嵌套元素(例如,文本块、段落、按钮等)在Div块

你会看到你的背景视频视频通过这些元素来相应地调整它们的高度、大小等。了解更多背景视频

在导航面板中,一个名为“内容块”的Div块和一个背景视频嵌套在一个Section中。

使用白色div块设置混合模式:

  1. 选择Div块
  2. 开放风格的面板>背景
  3. 点击样本颜色设置Div块背景白色
  4. 设置颜色(如背景色、字体颜色等)为黑色的方法中的所有元素Div块你想要透明化
  5. 选择Div块
  6. 开放风格的面板>影响
  7. 打开混合下拉选择减轻
在样式面板的效果部分,混合被设置为点亮。

使用黑色div块设置混合模式:

  1. 选择Div块
  2. 开放风格的面板>背景
  3. 点击样本颜色设置Div块背景黑色的
  4. 设置颜色(如背景色、字体颜色等)为白色方法中的所有元素Div块你想要透明化
  5. 选择Div块
  6. 开放风格的面板>影响
  7. 打开混合下拉选择变黑

减轻使黑暗元素消失;变黑使轻元素消失。了解更多关于混合模式

混合设置为变亮,视频背景可以通过嵌套的元素在白色div块中看到。
混合设置为变暗,视频背景可以通过黑色div块中的嵌套元素看到。
注意:你可以添加任何类型的背景到你的网站(视频,图像,颜色等)。只需要确保添加的背景与div块的背景有足够的对比度。这确保文本和其他元素在div块中是可见的。为了了解更多,查看Webflow大学关于颜色对比度的课程
尝试Webflow——它是免费的
Baidu
map