Question

我正在尝试为我出售的T恤的十六进制颜色按钮添加混色图像。它们现在是纯色，但是对于某些衬衫，我希望它们具有覆盖层以显示图案。如何将图像添加到特定的按钮（因为并非所有衬衫都经过打麻处理）并为该图像设置不透明度？现在是我的代码。我找到了一个很好的例子，说明我希望它如何在网上显示，以便您了解我的意思。您可以在这里查看：Heathered Color Swatch Overlay Example。

这是我目前拥有的代码：

$colors: ( 
  'color-Navy'                  #2D2F3C,
  'color-Ash'                   #EEF0F2,
  'color-Black'                 #060606,
  'color-White'                 #F6F6F6,
  'color-Charcoal'              #59545A,
);

@each $color in $colors {
 $colorName: nth($color, 1);
 $bgColor:   nth($color, 2);

#ProductSelect-option-#{$colorName} + label {
  background-color: $bgColor;
  color: $bgColor;
  width: 50px;
  height: 50px;
  overflow: hidden;
  border-radius: 25px;
  margin: 5px;
  text-indent: 100%;
  white-space: nowrap;
}

#ProductSelect-option-#{$colorName}:checked + label {
  border-color: #555;
  border-width: 3px;
 }
}

Answer 1

如果我了解您的要求，您希望将图像覆盖在每个按钮的彩色背景上，以传达衬衫是否被打上了希伯来语。

如果我没事的话，我认为您要寻找的是CSS background-image属性，但是您需要选择一种支持透明性的图像格式，例如.gif或{{ 1}}

然后在图像编辑器中打开衬衫形状的图像，并使用橡皮擦工具擦洗边缘或其他内容，直到看起来足够使您喜欢为止，然后将其添加到项目中并将其设置为.png每个按钮。

https://github.com/mattlewis92/angular-calendar页可能会提供帮助。

如何将图片叠加层添加到可点击的按钮

1 个答案: