CSS 背景图像将无法正确显示在中心答案

【问题标题】：CSS Background image will not display correctly in the centerCSS 背景图像将无法正确显示在中心
【发布时间】：2014-11-09 23:42:05
【问题描述】：

我制作了一个 1px X 1px 的图像，显示在一个 div 中，其高度将使用 jQuery 设置。 div 和图像将作为左右 div 之间的分隔线。但是，无论如何，图像永远不会出现。我可以确认图片加载（使用 F12 开发者工具）。

最终结果是在 div 的中心（水平）有一个 1px 宽 x Xpx 高的图像。高度将由 jQuery 设置。

我做错了什么？

<!DOCTYPE HTML>
<html>
<head>
  <title>Background Image Test</title>
</head>
<style type="text/css">
.m {
    border:1px solid black;
    padding:10px;
    background-image: url("/resources/images/hr-px-x.jpg") no-repeat center;
    background-position:center;
    height:200px;
    width:1px;
}
</style>

<body>

<div>
    <div class="m"></div>
</div>

</body>
</html>

Fiddle

【问题讨论】：

制作小提琴怎么样？
你试过用图片标签代替带背景的 div 吗？

标签： html css

【解决方案1】：

你应该试试这个，

Demo

.m {
    border:1px solid black;
    padding:10px;
    background: url("/resources/images/hr-px-x.jpg") no-repeat center;
    height:200px;
    width:1px;
}

【讨论】：

【解决方案2】：

您将元素 .m 的宽度设置为 1px 宽，使其改为 20px 宽，内边距为 0px

.m {
    border:1px solid black;
    padding:0px;
    background-image: url("/resources/images/hr-px-x.jpg") no-repeat center;
    background-position:center;
    height:200px;
    width:20px;
}

【讨论】：

【解决方案3】：

1) 使用background 属性而不是background-image

2) 您需要沿 y 轴重复图像，因此在您的背景上使用 repeat-y

.m {
    border:1px solid black;
    padding:10px;
    background: url(http://placehold.it/1x1) center center repeat-y;
    height:200px;
    width:1px;
}

FIDDLE

【讨论】：

是的，这就是我需要的。顺便说一句，我们需要宽度：1px 吗？无论如何，图像是 1px。
@Norman - 你是对的，你不需要 width: 1px - 但这取决于你希望容器有多宽。这是一个例子：jsfiddle.net/danield770/bm47L5hr/20
repeat-y 很不错。