Question

似乎background-position / background-cover不能将数据URI用作背景图像？我所拥有的是要上传的图像的预览。为了显示这些预览，我使用JS将数据URI转换为CSS背景图像，我希望将其放在中心位置。

但我注意到以下代码不适用于数据URI

div {
    width: 200px;
    height: 200px;
    display: block;
    background-size: cover;
    background-repeat: no-repeat;
    background-image: url(data:image/jpeg;base64,/9j/4AAQSkZJRg...);
}

https://jsfiddle.net/7pfc2vLx/

更新

我注意到很多人提到我在上面的例子中缺少背景位置。但似乎即使它是一个内联样式它不起作用？

<div id="profile-avatar" style="width: 200px; height: 200px; background-position: center center; background-size: cover; background-repeat: no-repeat; background-image: url(data:image/png;base64,iVBORw0KGgoAAAA

https://jsfiddle.net/7pfc2vLx/4/

Answer 1

如果您想要居中图像，请尝试JSfiddle

div {
  width: 100%;
  height: 200px;
  display: block;
  background-size: contain;
  background-repeat: no-repeat;
  background-image: url(data:image/jpeg;base64,/9j/4AAQSkZJRgABAgEASABIAAD/4QBsRXhpZgAASUkqAAgAAAAD…y5eKCQaVqJ0y7W7JJJ2b6cxwd3MlGwz9mN4vrwL6sTjY+BzMiXWzjSpa2fJRFOu/auHjYv/9k=);
  background-position: center center;
}

Answer 2

也许我在你的问题中遗漏了一些东西，但你不应该只是添加这个位置吗？

background-position: center;

Answer 3

您的背景已经适合div，如果您想确保它位于div的中心，请添加：

background-position:center center;

但似乎没什么变化，因为你的div本身不是中心，所以补充一下：

margin:0 auto;

现在他们全都处于中心位置。 https://jsfiddle.net/7pfc2vLx/2/

如何在背景图像中居中数据URI？

3 个答案: