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

Question

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

我有以下 HTML

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

Answer 1

您将需要使用不透明度属性。

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

正如@Tah Tatsumoto 所指出的，这将改变按钮的整个不透明度，包括文本。

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

<button>Hello</button>