Question

我正在研究一个项目，设计师制作了2套图标，第一套是白色的 opacity (0.5);背景和另一组应该是透明的，因此可以通过图标看到背景图像。

有没有办法让它们与css变得透明，所以他们切割容器背景，可以通过它们看到身体背景图像？我想为文本和复选框做同样的事情，这个复选框将是自定义的，并且在选中时会显示一个图标。希望有一个解决方案，因为我已经搜索了高低解决方案。

我有一个小代码示例：

 <body style="background-image:url('image.png');>
   <ul>
    <li>
      <i>Icon</i>
      <p>Some text</p>
      <input type="checkbox"/>
     </li>
    </ul>
  </body>

这不是同一个问题，我试图使图像完全透明，并使其裁剪为白色背景，以便通过它显示身体背景。因此，图像将具有相同的边界线，但身体背景为这是内容。当您滚动ul的内容时，所有图像将具有不同的背景，因为身体背景充满了颜色。希望我明确表示，如果不是，我会尽力澄清情况。但我认为客户和他的设计师是愚蠢的，并不知道这很难实现悖论。

Answer 1

这可以帮到你：

.container
{
background-size:80px;
background-repeat:no-repeat;
position:absolute;top:8px;left:8px;width:100%;height:100%;

background-color:transparent;
backface-visibility:visible;    
background-image: url('../img-folder/image.png');
}

最后三个选项很重要......

如何使图标变得透明？

1 个答案: