blocks|key|2585664|text|我更新了你的小提琴：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2585665|http://jsfiddle.net/7kM3R/7/|offset|length|2585666|下面是全班的完整css：|2585667|.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;
}|code-block|syntax|javascript|2585668|首先我去掉了填充物。然后为表格单元格设置固定大小(宽度和高度)：|2585669|width:+32px;
height:+32px;|2585670|并增加背景位置(中心)|2585671|background-position:+center+center;|2585672|entityMap|0|LINK|mutability|MUTABLE|url^0|0|0|S|0|0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|11|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|12|8|@]|9|@$D|13|E|14|1|15]]|A|$]]|$1|F|3|G|5|6|7|16|8|@]|9|@]|A|$]]|$1|H|3|I|5|J|7|17|8|@]|9|@]|A|$K|L]]|$1|M|3|N|5|6|7|18|8|@]|9|@]|A|$]]|$1|O|3|P|5|J|7|19|8|@]|9|@]|A|$K|L]]|$1|Q|3|R|5|6|7|1A|8|@]|9|@]|A|$]]|$1|S|3|T|5|J|7|1B|8|@]|9|@]|A|$K|L]]|$1|U|3|-4|5|6|7|1C|8|@]|9|@]|A|$]]]|V|$W|$5|X|Y|Z|A|$10|C]]]]

I've updated your fiddle:

<a href="http://jsfiddle.net/7kM3R/7/" rel="nofollow">http://jsfiddle.net/7kM3R/7/</a>

Here's full css for your class:

<pre><code>.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;
}
</code></pre>

Firstly I removed padding.
Then set fixed size for table cell (width&amp;height):

<pre><code>width: 32px;
height: 32px;
</code></pre>

and added background position (center)

<pre><code>background-position: center center;
</code></pre>

blocks|key|2585574|text|width:+15px;
text-align:+center;|type|code-block|depth|inlineStyleRanges|entityRanges|data|syntax|javascript|2585575|将这些行添加到您的css将给您一个ans检查您的小提琴的影响，我已经更新了。|unstyled|2585576|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$B|C]]|$1|D|3|E|5|F|7|J|8|@]|9|@]|A|$]]|$1|G|3|-4|5|F|7|K|8|@]|9|@]|A|$]]]|H|$]]

<pre><code>width: 15px;
text-align: center;
</code></pre>

Adding these lines to ur css will give you an ans
check the impact in your fiddle which I have updated

blocks|key|324647|text|背景图像由td元素的宽度裁剪。给你的td一个固定的宽度，它就能工作了。看看这个小提琴|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|324648|entityMap|0|LINK|mutability|MUTABLE|url|http://jsfiddle.net/7kM3R/10/^0|5|2|I|2|13|3|0|0^^$0|@$1|2|3|4|5|6|7|N|8|@$9|O|A|P|B|C]|$9|Q|A|R|B|C]]|D|@$9|S|A|T|1|U]]|E|$]]|$1|F|3|-4|5|6|7|V|8|@]|D|@]|E|$]]]|G|$H|$5|I|J|K|E|$L|M]]]]

Your background image is cutted by the width of your <code>td</code> element. Give your <code>td</code> a fixed width and it will work. Have a look at this <a href="http://jsfiddle.net/7kM3R/10/" rel="nofollow">fiddle</a>

blocks|key|2585620|text|您可以将min-width用于<td>，比如这样的链接。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|2585621|entityMap|0|LINK|mutability|MUTABLE|url|http://jsfiddle.net/Rw3Qk/^0|4|9|F|4|P|2|0|0^^$0|@$1|2|3|4|5|6|7|N|8|@$9|O|A|P|B|C]|$9|Q|A|R|B|C]]|D|@$9|S|A|T|1|U]]|E|$]]|$1|F|3|-4|5|6|7|V|8|@]|D|@]|E|$]]]|G|$H|$5|I|J|K|E|$L|M]]]]

You can use <code>min-width</code> for <code>&lt;td&gt;</code> like this <a href="http://jsfiddle.net/Rw3Qk/" rel="nofollow">link</a>.

blocks|key|324622|text|您只需要设置固定块bkgImg+sizes+width:32px;+height:32px;或更改padding:+6px+11px;|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|324623|++++++++.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;
}|code-block|syntax|javascript|324624|演示|324625|entityMap|0|LINK|mutability|MUTABLE|url|http://jsfiddle.net/7kM3R/15/^0|G|U|1D|I|0|0|0|2|0|0^^$0|@$1|2|3|4|5|6|7|U|8|@$9|V|A|W|B|C]|$9|X|A|Y|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|Z|8|@]|D|@]|E|$I|J]]|$1|K|3|L|5|6|7|10|8|@]|D|@$9|11|A|12|1|13]]|E|$]]|$1|M|3|-4|5|6|7|14|8|@]|D|@]|E|$]]]|N|$O|$5|P|Q|R|E|$S|T]]]]

you only need to set fixed block bkgImg <code>sizes width:32px; height:32px;</code> or change the <code>padding: 6px 11px;</code>

<pre><code> .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;
}
</code></pre>

<a href="http://jsfiddle.net/7kM3R/15/" rel="nofollow">DEMO</a>

blocks|key|324655|text|你需要专门研究width和height|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|324656|您应该避免在圆圈中使用background-image，但使用border-radius|324657|.value+{
++++width:+30px;
++++height:+30px;
++++border-radius:+30px;
++++background-color:+orange;
++++color:+white;
}|code-block|syntax|javascript|324658|避免对非表格数据使用表。|324659|entityMap^0|7|5|D|6|0|B|G|V|D|0|0|0^^$0|@$1|2|3|4|5|6|7|Q|8|@$9|R|A|S|B|C]|$9|T|A|U|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|V|8|@$9|W|A|X|B|C]|$9|Y|A|Z|B|C]]|D|@]|E|$]]|$1|H|3|I|5|J|7|10|8|@]|D|@]|E|$K|L]]|$1|M|3|N|5|6|7|11|8|@]|D|@]|E|$]]|$1|O|3|-4|5|6|7|12|8|@]|D|@]|E|$]]]|P|$]]

You need to specifiy <code>width</code> and <code>height</code>

You should avoid use <code>background-image</code> for circle but <code>border-radius</code>

<pre><code>.value {
 width: 30px;
 height: 30px;
 border-radius: 30px;
 background-color: orange;
 color: white;
}
</code></pre>

avoid also to use table for non tabular data

blocks|key|2585730|text|只需将background-size:32px+32px更改为background-size:100%25+100%25;|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|2585731|演示|2585732|entityMap|0|LINK|mutability|MUTABLE|url|http://jsfiddle.net/7kM3R/5/^0|3|P|V|Q|0|0|2|0|0^^$0|@$1|2|3|4|5|6|7|P|8|@$9|Q|A|R|B|C]|$9|S|A|T|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|U|8|@]|D|@$9|V|A|W|1|X]]|E|$]]|$1|H|3|-4|5|6|7|Y|8|@]|D|@]|E|$]]]|I|$J|$5|K|L|M|E|$N|O]]]]

Just change <code>background-size:32px 32px</code> to <code>background-size:100% 100%;</code>

<a href="http://jsfiddle.net/7kM3R/5/" rel="nofollow">DEMO</a>

blocks|key|324664|text|您需要设置元素的宽度和高度。例如，添加：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|324665|bkgImg+{
++++width:450px;
++++height:450px;
}|code-block|syntax|javascript|324666|示例：http://jsfiddle.net/pndz/WFQLC/|offset|length|324667|entityMap|0|LINK|mutability|MUTABLE|url|http://jsfiddle.net/pndz/WFQLC/^0|0|0|3|V|0|0^^$0|@$1|2|3|4|5|6|7|S|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|T|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|U|8|@]|9|@$I|V|J|W|1|X]]|A|$]]|$1|K|3|-4|5|6|7|Y|8|@]|9|@]|A|$]]]|L|$M|$5|N|O|P|A|$Q|R]]]]

You need to set width and height of your element. For example add:

<pre><code>bkgImg {
 width:450px;
 height:450px;
}
</code></pre>

Example:
<a href="http://jsfiddle.net/pndz/WFQLC/" rel="nofollow">http://jsfiddle.net/pndz/WFQLC/</a>

blocks|key|977868|text|添加以下css|type|unstyled|depth|inlineStyleRanges|entityRanges|data|977869|.value+{
++++width:+30px;
++++height:+30px;
}|code-block|syntax|javascript|977870|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

Add following css

<pre><code>.value {
 width: 30px;
 height: 30px;
}
</code></pre>

Can someone one please give me a hand with the CSS for displaying an image as the background of a TD and fitting some text correctly over it.

It seems that for double digits works fine but with a single I am getting some clipping.
<img src="https://i.stack.imgur.com/k4RSo.png" alt="enter image description here">

CSS:

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

HTML:

<pre><code> &lt;table&gt;
 &lt;tr&gt;
 &lt;td class="bkgImg"&gt;50&lt;/td&gt;
 &lt;/tr&gt;
 &lt;/table&gt;
</code></pre>

<a href="https://i.stack.imgur.com/k4RSo.png" rel="nofollow noreferrer">SEE LINK</a>

Fiddle: <a href="http://jsfiddle.net/7kM3R/" rel="nofollow noreferrer">http://jsfiddle.net/7kM3R/</a>

CSS for fit image to table cell with text overlay

翻译质量差，导致语言生硬或混乱。

没有提供实际的解决方法或示例。

解答不清晰，无法理解或解决问题。

页面排版不美观，阅读体验差。

文章

问答

视频

教程

学习中心

腾讯云实验室

直播

竞赛

腾讯云代码分析专区

腾讯iOA零信任安全管理系统专区

腾讯云架构师技术同盟交流圈

腾讯云数据库专区

腾讯云智能顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

EdgeOne AI 安全实战专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋

腾讯云代码助手

云原生构建

TAPD 敏捷项目管理

Cloud Studio

SDK中心

API中心

命令行工具

涵盖代码开发、场景应用、自动测试全流程，助你从零构建专属AI助手

一站式MCP教程库，解锁AI应用新玩法

聚焦“写作效率、视觉美观与运行性能”三方面进行全面升级，为您提供更高效、稳定的创作环境

社区富文本&Markdown编辑器全新改版上线，欢迎大家体验!

诚挚邀请您参与本次调研，分享您的真实使用感受与建议。您的反馈至关重要，感谢您的支持与参与！

社区新版编辑器体验调研

有人能帮我一下吗?用CSS来显示图片作为TD的背景，并将一些文字正确地贴合在上面。似乎两位数的效果很好，但是用一张单数我就可以剪裁了。​CSS：.bkgImg {  background: url('/Images/circle.png') no-repeat;  background-size:32px 32px;  padding: 6px 8px 6px 8px;  color: white

问具有文本覆盖的表格单元格匹配图像的CSS
EN

回答 9

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问具有文本覆盖的表格单元格匹配图像的CSSEN

回答 9

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问具有文本覆盖的表格单元格匹配图像的CSS
EN