Question

我在https://hbccc.org/services-we-provide/创建了带有PNG背景图像的按钮，但是图像背景是白色而不是透明的。

按照类似问题的建议，我使用Inspector检查了所有较高的容器，并确认具有背景颜色的下一个较高的容器是我的页面背景。

我将html，css和图像复制到了https://mountainviewpm.com/button-test.html的新html页面上，它们可以正确显示。按钮图像在Fireworks中创建为透明的8位PNG，并确认按钮和图像在那里正确显示。

这是带有一个按钮的页面的html（其他按钮相同，除了文本和背景图片）：

<div class="services-container">
  <a href="https://hbccc.org/childrens-counseling/">
  <button class="service-button" id="children" type="button">Children's Counseling</button></a> 
</div>

这是容器和按钮的css：

.services-container {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  width: 900px;
  max-width: 100%;
  align-items: center;
  margin: 0 -11px;
}

.service-button {
  font-family: 'Amiko', sans-serif;
  color: #414141;
  font-size: 1.2em;
  background-color: transparent !important;
  padding: 90px 0 0 0;
  text-align: center;
  width: 229px;
  height: 232px;
  cursor: pointer;
  text-decoration: none;
  margin: 20px 11px;
}

#children {
  background-image: url(assets/images/childrens.png);
  background-repeat: no-repeat;
  background-position: center 30%;
}

我希望图像的背景是按钮背景，而不是白色。

透明PNG在WordPress网站中不透明

0 个答案: