适合图像的CSS到具有文本覆盖的表格单元格

Question

有人可以帮我把CSS用于显示图像作为TD的背景并在其上正确拟合一些文本。

似乎对于两位数工作正常但有一个我得到一些剪辑。

CSS：

.bkgImg {
  background: url('/Images/circle.png') no-repeat;
  background-size:32px 32px;
  padding: 6px 8px 6px 8px;
  color: white;
}

HTML：

    <table>
        <tr>
           <td class="bkgImg">50</td>
        </tr>
   </table>

SEE LINK

小提琴：http://jsfiddle.net/7kM3R/

Answer 1

我已经更新了你的小提琴：

http://jsfiddle.net/7kM3R/7/

这是您班级的完整css：

.bkgImg {
    background-image: url("http://www.charlespetzold.com/blog/2012/12/BezierCircleFigure3.png");
    background-repeat: no-repeat;
    background-position: center center;
    background-size:32px 32px;
    color: white;
    width: 32px;
    height: 32px;
    text-align: center;
    vertical-align: middle;
}

首先我删除了填充。 然后为表格单元格（宽度和高度）设置固定大小：

width: 32px;
height: 32px;

并添加背景位置（中心）

background-position: center center;

Answer 2

width: 15px;
text-align: center;

将这些行添加到ur css会给你一个ans 检查我已更新的小提琴中的影响

Answer 3

您的背景图片被td元素的宽度切割。给你的td一个固定的宽度，它会起作用。看看 fiddle

Answer 4

您可以min-width使用<td>，例如link。

Answer 5

您只需设置固定块bkgImg sizes width:32px; height:32px;或更改padding: 6px 11px;

        .bkgImg {
            width: 32px;
    height: 32px;
  background: url("http://www.charlespetzold.com/blog/2012/12/BezierCircleFigure3.png") no-repeat;
  background-size:32px 32px;
  /*padding: 6px 8px 6px 8px;*/
  color: white;
    text-align:center;
}

DEMO

Answer 6

您需要指定width和height

您应避免使用background-image代替圈border-radius

.value {
    width: 30px;
    height: 30px;
    border-radius: 30px;
    background-color: orange;
    color: white;
}

避免将表用于非表格数据

Answer 7

只需将background-size:32px 32px更改为background-size:100% 100%;

即可

DEMO

Answer 8

您需要设置元素的宽度和高度。例如，添加：

bkgImg {
    width:450px;
    height:450px;
}

实施例： http://jsfiddle.net/pndz/WFQLC/

Answer 9

添加以下css

.value {
    width: 30px;
    height: 30px;
}