Question

我在下面有以下CSS制作一个按钮，但我希望具有透明效果（稍微看一下后面的背景）。请注意，我不希望将它全部透明且完全隐形。只是一点......

我已经尝试过搞乱“不透明度”＆＃39;但这只会模糊图像并扭曲颜色。

.i2Style {
  font:bold 20px"Arial Black", Gadget, sans-serif;
  font-style:normal;
  color:#ffd324;
  background:#158edb;
  border:0px solid #4a3a00;
  text-shadow:0px -1px 1px #222222;
  box-shadow:0px 0px 12px #2e2300;
  -moz-box-shadow:0px 0px 12px #2e2300;
  -webkit-box-shadow:0px 0px 12px #2e2300;
  border-radius:15px 15px 15px 15px;
  -moz-border-radius:15px 15px 15px 15px;
  -webkit-border-radius:15px 15px 15px 15px;
  width:87px;
  padding:20px 46px;
  cursor:pointer;
  margin:0 auto;
}

.i2Style:active {
  cursor:pointer;
  position:relative;
  top:2px;
}

Answer 1

透明度由Alpha通道决定。

例如，

.button{
  background-color: rgba(0,0,0,1); // red, green, blue, alpha
}

提供全黑按钮，

.button{
  background-color: rgba(0,0,0,0.5); // red, green, blue, alpha
}

黑色按钮， 50％透明度。

Answer 2

由于您没有寻找不透明度，this post outlines both methods of css opacity and transparency

For anyone looking for opacity, this link will help

在大多数情况下，到处都支持不透明度。提供回退并不是真正的遗憾，但对于那些在更新浏览器方面落后的人来说，这将有所帮助。

如果您想了解更多信息，只需google css opacity或css opacity image

Answer 3

尝试将background更改为background-color: rgba(21,142,219,.70)。这将使您的按钮保持稳定，但使背景略微透明。

Answer 4

使用不透明度，它不应扭曲您的图像。

.i2Style {
        opacity: 0.4;
        filter: alpha(opacity=40); /* For IE8 and earlier */
    }

如何使CSS按钮显示透明

4 个答案: