Question

我正在这个网站上工作itsquad.us。我需要在带有背景图片的横幅下添加我的免费电话号码。代码是

 <div class="call"><p>1-855-566-6006</p></div></div>

CSS

.call
{
color: #FD7800;
font-weight: bold;
font-size: 23px;
background:url('http://itsquad.us/wp-content/uploads/2014/06/tollfree1.png') no-repeat;
}

但是图像显示在div的左边。我不知道发生了什么。我试过在css中给出 margin，postion，padding 等没有帮助。我想把它放在主页banner的中心。请帮助我。谢谢!!

Answer 1

试试这个：

<强> CSS

.call { 
     background: url("http://itsquad.us/wp-content/uploads/2014/06/tollfree1.png") no-repeat scroll 0 0 rgba(0, 0, 0, 0); 
     color: #FD7800; 
     font-size: 23px; 
     font-weight: bold; 
     height: 90px; 
     padding-left: 70px; 
     width: 150px; 
}

.call p { 
     margin: 0; 
     position: relative; 
     top: 22px; 
}

<强> HTML

<div class="call"><p>1-855-566-6006</p></div>

Answer 2

我希望我的例子有用Codepen demo

<强> HTML

<div class="call"><p>1-855-566-6006</p></div>

<强> CSS

body {
  background: #ececec;
}
.call
{
color: #FD7800;
font-weight: bold;
font-size: 23px;
background:url('http://itsquad.us/wp-content/uploads/2014/06/tollfree1.png') no-repeat;
background-size:contain;
width: 500px;
height: 160px;
display:block;
}
.call p {
  padding-top:50px;
  text-align:center;
}

Answer 3

在后台网址中，尝试在上传网站上传图片（并粘贴网址）。不要忘记制作高度和宽度。

.yourCLASS{ 
 width: ?;
 height: ?;   
background: url(....);}

背景图像无法正确显示

3 个答案: