如何使按钮具有背景图像并同时透明？

Question

如何使按钮HTML标签的背景具有背景图像并使用CSS / html具有透明背景？

我有以下HTML

<button style="backgroud-image: url('../images/example.png');"></button>

Answer 1

您将需要使用opacity属性。

此属性的值可以是0-1，其中0表示透明，1表示完全不透明。

如@Tah Tatsumoto所述，这将改变按钮的整个不透明度，包括文字。

＆＃13;

＆＃13;

button{
  background-image: url('http://www.joomlaworks.net/images/demos/galleries/abstract/7.jpg'); 
  background-size:contain;
  height:100px;
  width:100px;
  opacity:0.5;
}

＆＃13;

<button>Hello</button>

＆＃13;

＆＃13;

＆＃13;