如何将图像放在背景颜色上？

Question

您好我们正在使用CSS3。

我们有一个TD标签，背景颜色设置为红色。

我们正在寻找一种可以放置以红色背景为中心的图像的方法。红色背景和居中图像都必须在td标记内可见。

背景和图像必须以TD标签的内联样式指定..

Answer 1

HTML：

<td style="background: red url(http://lorempixel.com/output/nature-q-c-50-50-9.jpg) center no-repeat"></td>

Background属性文档。

1. red设置background-color
2. url(...)设置图片
3. center将图片原点设为中心
4. no-repeat禁用图片重复



JSBin

Answer 2

使用背景属性我们可以做到

尝试以下

background: url("image path") no-repeat scroll center center #FF0000;

Answer 3

如果您想显示背景颜色，请为您的td标签添加宽度和高度，并为您的图片添加背景尺寸，如下面的CSS。

width: 200px;
height: 200px;
background-color: red;
background-image: url('http://i.stack.imgur.com/i7woY.png?s=128&g=1');
background-position: center center;
background-repeat: no-repeat;
background-size: 100px 100px;