css 蒙版_如何使用CSS蒙版创建Switch UI

在图像处理中， 遮罩是一种允许您彼此隐藏图像的技术。 遮罩用于使图像的一部分透明 。 您可以借助masking属性使用CSS执行遮罩。

在今天的帖子中，我们将使用两个PNG图像和CSS遮罩技术来创建一个遮罩的图像，并允许用户借助切换UI来处理图像的两种状态（ 白天和黑夜 ）。

由于一些浏览器兼容性问题（截至2016年6月，并非所有浏览器都支持所有遮罩属性），我将展示两种添加遮罩的技术 ，一种用于基于Webkit的浏览器，另一种用于Firefox。 对于每个浏览器，此三步教程中的前两个步骤都是相同的，但是在第三步中会有所不同。

步骤1.创建一个基本开关

由于典型的开关具有两种状态，一次只能启用一种状态，因此可以使用两个单选按钮组 创建交换机的工作组件。 将每个单选按钮放置在其父元素的左右两端。

通过为每个单选按钮赋予相同的name属性来创建单选按钮组。 在单选按钮组中，一次只能选中一个单选按钮 。

我们从以下HTML和CSS开始：

<div id="outerWrapper">
<div id="innerWrapper">
  <input type="radio" id="leftRadio" class="radio" name="radio" />
  <input type="radio" id="rightRadio" class="radio" name="radio" checked />
</div>
</div>

在下面CSS中，我使用绝对定位将单选按钮准确地放置在屏幕上所需的位置。

#outerWrapper{
  width: 450px;
  height: 90px;
  padding: 10px;
  margin: 100px auto 0 auto;
  border-radius: 55px;
  box-shadow: 0 0  10px 6px #EAEBED;
  background: #fff;
}
#innerWrapper{
  height:100%;
  border-radius:45px;
  overflow:hidden;
  position:relative;
}
.radio{
  width:90px;
  height:100%;
  position:absolute;
  margin:0;
  opacity: 0;
}
#rightRadio{
  right: 0;
}
.radio:not(:checked){
  cursor: pointer;
}

我向.radio类添加了opacity:0规则，以隐藏单选按钮 。 下面代码块中的最后一条规则cursor: pointer; 显示未选中的单选按钮的指针光标，以便用户知道单击哪个按钮可切换开关状态。

Chrome浏览器中带有单选按钮的切换UI的屏幕截图

步骤2.将皮肤添加到交换机

在此步骤中，我们将为HTML文件中单选按钮下方的两个皮肤添加两个<div>标签，并为CSS中的每个皮肤添加背景图像。

我将“