如何在背景图片中居中放置数据URI?

最后发布: 2016-10-17 06:36:46


问题

似乎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/

UPDATE

我注意到,就像很多人提到的那样,我在上面的示例中缺少背景位置。 但是,即使它是内联样式,它似乎也不起作用?

<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/

css
回答

如果要居中图像,请尝试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;
}


回答

也许我在您的问题中遗漏了一些东西,但您不应该只是增加职位吗?

background-position: center;


回答

您的背景已经适合div,如果要确保它位于div的中心,请添加:

background-position:center center;

但是似乎没有什么变化,因为您的div本身不在居中,因此添加:

margin:0 auto;

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