旋转木马背后的背景图像[关闭]答案

【问题标题】：Background-image behind Carousel [closed]旋转木马背后的背景图像[关闭]
【发布时间】：2016-04-19 00:45:27
【问题描述】：

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

【问题讨论】：

用jsfiddle分享你的html和css代码演示
请为您的代码提供 jsfiddle 或 sn-p..
抱歉，这是我的代码的样子：codepen.io/jgrandsenne/pen/aNGQrP // 它已经比在真实网站上运行得更好（我更改了图片），这仅仅是图像大小的问题吗？原始文件？
您的标记必须在此处。第三方网站上的标记可以并且确实会消失，并且对寻求相同帮助的未来访问者没有帮助。

标签： twitter-bootstrap css twitter-bootstrap-3 carousel

【解决方案1】：

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

http://codepen.io/DasithKuruppu/pen/MyGZdd

基本上我变了

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%，这意味着它将水平居中

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

【讨论】：

非常感谢，真的差不多了，除了图像的宽度和高度都必须居中，而且当我更改高度参数时，我没有得到任何相关信息……你能告诉我吗？
正如您已经发现，通过设置 margin-top 和 margin-bottom，垂直居中的图像与水平方向几乎相同。如果它解决了您的问题，请将答案标记为正确答案，codepen.io/DasithKuruppu/pen/pyVmdz

【解决方案2】：

编辑答案

这个https://jsfiddle.net/rzc1e1jf/ 怎么样？（请注意，在外部资源中我添加了引导基础知识）

这次我从头开始，似乎工作正常。

上一个答案

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

http://codepen.io/andrasadam93/pen/BKxvRZ

#carousel-container {
    background-image: url('http://portfoliotheme.org/enigmatic/wp-content/uploads/sites/9/2012/07/placeholder1.jpg');
  background-size:cover;
  height:100%;
  width:100%;
  position: absolute;
}


#homecarousel {
    position:relative;
    float:left;
    margin-left:10%;
    width: 80%;
    height:100%;
}
.carousel-inner {
  height:100%;
}

【讨论】：

我实际上需要让小猫成为一个旋转木马，位于静止的背景图像中间
我添加了一个新的 JS Fiddle，我猜这就是你要找的！
必须在此处发布您编辑的标记，因为第三方帖子可以并且确实会消失，从而使您的答案对未来的访问者毫无用处。
Rob 会这样做，一旦讨论结束。

【解决方案3】：

好的，它已经解决了，非常感谢 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%;
}

非常感谢

【讨论】：