Question

我正在努力使我的背景img圆形并将其置于中心位置。我正在尝试下面给出的代码：

.jumbotronhh
    {
        background-image: url('http://simplelize.com/wp   content/uploads/2013/03/old-camera-620x350.jpg');
        background-repeat: no-repeat;
        background-position: 50%;   
        border-radius: 50%;
        height: 300px;
        width: 300px;    *//If I don't use this line then the background picture stays in center in a rectangular form but after using this I got the bg-img circle but it moves at the left side of the screen..*  
    }

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

Answer 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;
}

由于您实际上无法在border-radius属性中使用background。

Answer 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; 
}

如何制作背景图像并放入中心？

2 个答案: