CSS-没有正确显示背景图片

Question

我有使用Cordova的HTML，CSS，JS应用程序。我正在尝试使用CSS背景图片在页面上显示whatsapp图标图片。

图像已加载。但是，没有显示图像，并且控制台也没有显示禁止图像访问，找不到图像等错误。

• 我尝试使用<img />显示图像，但没有用。
• 我尝试使用以下css属性：background-size: contain !important;
• 我尝试更改background-position的值。
• 我尝试在元素的内联CSS样式中使用background-image。
• 我尝试将文本添加到<a>元素中。

他们都没有工作！

这是我的代码：

.whatsapp-icon {
  background-size: contain;
  border-radius: 5px;
  margin-top: 10px;
  height: 35px;
  width: 35px;
  display: block;
  float: right;
  text-decoration: none;
}

<div class='theDownBar'>
  <a style='background-image: url(img/whatsapp-icon.png);' href='https://api.whatsapp.com/send?phone=phonenumber' class='whatsapp-icon'></a>
</div>

编辑：添加了一些图片以澄清

元素正在显示并且具有宽度和高度

没有控制台错误，当我检查源代码时，图像已成功加载

Answer 1

对我来说，您的代码工作正常，我刚刚更改了图像网址，请参见：

<style>
.whatsapp-icon {
    background-size: contain;
    border-radius: 5px;
    margin-top: 10px;
    height: 35px;
    width: 35px;
    display: block;
    float: right;
    text-decoration: none;
}
</style>
<div class='theDownBar'><a style='background-image:url(https://lh5.googleusercontent.com/-GuUP5Jaz3Rg/AAAAAAAAAAI/AAAAAAAAAAc/HwaA1tNmtd0/photo.jpg);' href='https://api.whatsapp.com/send?phone=phonenumber' class='whatsapp-icon'></a></div>

您应该再次检查它，但是如果仍然无法使用，请尝试以下代码：

<div class='theDownBar'>
<a href='https://api.whatsapp.com/send?phone=phonenumber' class='whatsapp-icon'>
<img src='https://lh5.googleusercontent.com/-GuUP5Jaz3Rg/AAAAAAAAAAI/AAAAAAAAAAc/HwaA1tNmtd0/photo.jpg'/>
</a></div>

别忘了将图片网址替换为您自己的图片。

Answer 2

.whatsapp-icon {
  background-size: contain;
  border-radius: 5px;
  margin-top: 10px;
  height: 35px;
  width: 35px;
  display: block;
  background-repeat:no-repeat;
    background-position: center;
  float: right;
  text-decoration: none;
}

<div class='theDownBar'>
  <a style="background-image: url('https://imageog.flaticon.com/icons/png/512/33/33447.png?size=1200x630f&pad=10,10,10,10&ext=png&bg=FFFFFFFF');"
     href='https://api.whatsapp.com/send?phone=phonenumber' class='whatsapp-icon'></a>
</div>

我做到了这一点及其工作！可能检查您的图片无效！

Answer 3

已修复

当我从其他浏览器运行它时，它就起作用了。

我根本没有意识到问题会是这样的。

我已经完成了清除浏览器的缓存，并且可以正常工作。

感谢所有浪费自己时间来帮助我的人。

而且，特别感谢那些对我的问题投反对票的人。

编辑：

再次感谢谁投票赞成我的答案。