Twitter bootstrap 旋转木马后面的背景图像

我有一个引导旋转木马工作正常，但我想在这个旋转木马后面添加一个背景图像，背景图像宽度为100%，在图像内部，覆盖图像的80%，旋转木马工作正常。 我尝试过在我的#homecarousel的CSS中使用背景图像，我尝试过一些棘手的位置：绝对操作（无论如何这不是一个好主意），我检查过周围已经存在的帖子，但没有任何效果… 基本上它只是一个大矩形里面的一个小矩形，而这个小矩形是一个旋转木马… 有什么想法吗？ 与Javascript操作相比，我更喜欢纯CSS解决方案，因为我没有对90%的网站进行编程，只是现在使用，而且所有的文件都乱七八糟，所以我更喜欢尽可能少地触摸。

---

非常感谢

编辑的答案

这个怎么样？（注意，在外部资源中，我添加了引导基础）

这一次我是从零开始的，看起来效果不错

---

先前的答案

我不能100%确定我正确理解了你的问题，但这就是你想要实现的目标：

---

给你，我希望这就是你需要的

基本上我变了

carousel-inner>.item>a>img, .carousel-inner>.item>img, .img-responsive,  .thumbnail a>img, .thumbnail>img {

        width: 80%;
        /* left: 50%; */
        margin-left: 10%;
        height: auto;
    }

^这将旋转木马的内部图像设置为容器宽度的80%，并将左侧边距设置为10%，这意味着它将水平居中

---

至于背景图像，我将其设置为覆盖而不是包含，覆盖将背景图像拉伸到远角，这可能会改变图像的原始纵横比，而不是包含。

好的，这是解决的，多亏了Dasith Kuruppu，并且垂直居中，正如我在代码中所想，你只需要对up和bottom做同样的操作，它不起作用的原因仅仅是与另一个声明的冲突。这就是：

.carousel-inner>.item>a>img, .carousel-inner>.item>img {

width: 90%;
/* left: 50%; */
margin-left: 5%;
margin-right: 5%;
height: 90% ;
margin-bottom:5%;
margin-top: 5%;
}

---

非常感谢

使用JSFIDLE共享您的html和css代码演示。请使用JSFIDLE或代码片段提供您的代码。很抱歉，是的，这是我的代码的样子：//它已经比真实网站（我更改了图片）工作得更好了。这仅仅是原始文件中图像大小的问题吗？您的标记必须在这里。第三方网站上的标记可以，也可以消失，对未来的访问者也没有帮助。我实际上需要小猫成为一个旋转木马，以一个不移动的背景为中心，IMAEI增加了一个新的JS小提琴，我猜这就是你要找的！您编辑的标记必须发布在此处，因为第三方帖子可以并且确实会消失，使您的答案对未来的访问者毫无用处。讨论结束后，Rob将立即这样做。非常感谢，事实上几乎就是这样，除了图像必须在宽度和高度上居中，当我改变高度参数时，我没有得到任何相关信息……你能告诉我吗？正如你已经发现的那样，通过设置页边顶部和页边底部，垂直居中的图像与水平居中的图像几乎相同。如果解决了您的问题，请务必将答案标记为正确答案，

.carousel-inner>.item>a>img, .carousel-inner>.item>img {

width: 90%;
/* left: 50%; */
margin-left: 5%;
margin-right: 5%;
height: 90% ;
margin-bottom:5%;
margin-top: 5%;
}