2017-09-14 75 views
0

显示背景图片我想显示定制的圆形里内的图像。我只想在那里展示一个成功的刻度图。我有一个CSS为 -CSS - 李

span.round-tabs { 
 
    width: 50px; 
 
    height: 50px; 
 
    line-height: 50px; 
 
    display: inline-block; 
 
    border-radius: 100px; 
 
    background: white; 
 
    z-index: 2; 
 
    position: absolute; 
 
    left: 0; 
 
    text-align: center; 
 
    font-size: 25px; 
 
} 
 

 
li.success span.round-tabs.one { 
 
    background-image: url('img/if_Tick_Mark_Dark_1398912.png'); 
 
} 
 
 
 
<li class="success"> 
 
    <a href="#" aria-controls="home" id="DivPatientDetails" name="PatientDetails" > 
 
     <span class="round-tabs one"> 
 
      <i class="icon icon-profile-male"></i>01 
 
      <h4>Patient's Details</h4> 
 
     </span> 
 
    </a> 
 
</li>

但我得到的结果为:

enter image description here

代替:

enter image description here

我在这里错过了什么?

+0

https://www.w3schools.com/cssref/pr_background-position.asp最有可能你的形象有一定的边界了。我确定这是一个正方形的图像,中间有一个绿色圆圈。偏移图像位置,以便圆形排列。 – Jerinaw

+0

为什么你将背景分配给span而不是li? – cloned

+0

您需要包括引导你的代码在圆的“内容区”的工作,所以 – ProEvilz

回答

2

要么使用

background-position: center center;

,或者使用

background-position-ybackground-position-x到图像正确地定位。

那么你可能想以确保尺寸正确使用CSS的background-size规则。如果你张贴了一个jsfiddle,我很乐意将这个解决方案应用到你看到的。

+0

正确的,只要为0x0,因为它似乎是知道的。如果改变了,它可能不会工作了。作为替代,使用图标字体或SVG代替图像可能是个好主意。 –

+0

谢谢..这里是的jsfiddle .. https://jsfiddle.net/4sn7a9c4/1/ –

+0

@omkarpatade你的小提琴不像你的形象,似乎打破。 – ProEvilz