Question

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

Answer 1

已编辑答案

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

这次我从零开始，看起来工作正常。

上一个回答

我并非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%;
}

Answer 2

你走了，我希望这是你需要的？

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％的边距，这意味着它将水平居中

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

Answer 3

好的，它已经解决了，非常感谢Dasith Kuruppu，并且正如我从你的代码中想到的那样垂直居中，你只是做同样的向上和向下，之所以没有＆＃39;工作只是与另一个声明的冲突。所以这就是：

.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%;
}

非常感谢

在转盘后面的背景图象

3 个答案: