Question

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

最终结果是在div的中心（水平）处具有1px宽×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

Answer 1

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

Answer 2

你应该试试这个，

Demo

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

Answer 3

您将元素.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;
}

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

3 个答案: