如何使背景图像变圆并放入中心？答案

【问题标题】：How to make background-img round and put into center?如何使背景图像变圆并放入中心？
【发布时间】：2016-01-22 20:51:32
【问题描述】：

我正在尝试使我的背景图像变圆并将其置于中心位置。我正在尝试使用下面给出的代码：

.jumbotronhh { background-image: url('http://simplelize.com/wp content/uploads/2013/03/old-camera-620x350.jpg'); 背景重复：不重复；背景位置：50%；边界半径：50%；高度：300px；宽度：300px； *//如果我不使用这条线，那么背景图片会以矩形形式保持在中心，但使用它后我得到了 bg-img 圆圈，但它在屏幕左侧移动..* }

怎么办？！我完全是新手..请帮助..

【问题讨论】：

您能否添加完整的代码来重现您的问题。
你不能在背景图片上使用border-radius...只有元素。所需结果的图像会很有用。
我知道 img 可以在这里工作，但我正在尝试使用 bg-img，这不可能吗？ :(
是的，这样影响背景图片是不可能的。
你能把margin:0 auto添加到那个div并检查一下

标签： html css

【解决方案1】：

您可以通过创建一个 div 类并设置一些 z-index 将图像放在其他所有内容的后面，使其看起来像一个实际的背景图像。

<div class="bg-image">
   <img src="mybackground.jpg">
</div>

还有 CSS：

.bg-image {
   position: relative;
   min-width: 100%;
   min-height: auto;
}

.bg-image img {
   position: relative;
   width: 100%;
   height: auto;
   z-index: -100;
   border-radius: 30px 30px 30px 30px;
}

因为你真的不能在background 属性中使用border-radius。

【讨论】：

【解决方案2】：

我用另一张图片测试了你的代码，它工作正常

如果你的意思是另一回事，请告诉我。

HTML：

<div class="jumbotronhh"></div>

CSS：

.jumbotronhh
{
    background-image: url('http://goo.gl/amTgah');
    background-repeat: no-repeat;
    background-position: 50%;   
    border-radius: 50%;
    height: 300px;
    width: 300px; 
}

【讨论】：