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

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>

背景属性文档。

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;