画像を絶対に乱す（Ruby on Rails）

-1

私は、それらの上にテキストを持つ画像を持つブートストラップカルーセルを作成しようとしています。そのためには、カルーセル内の画像の位置を絶対的にする必要があります。私は声を必要とし、これは画像の上にLAのテキストです画像を絶対に乱す（Ruby on Rails）

それは絶対作ら前にここでの画像は、カルーセルです。だから私は、それは絶対にし、これは

を発生し、関係なく、私は何をすべきか、私はそれを修正するように見えることはできません。ここで

は私のスリムマークアップ

.container#testimonialsSection 
    .carousel.slide#testimoniesCarousel data-ride="carousel" 
     ol 
     li data-target="#testimoniesCarousel" data-slide-to="0" class="active" 
     li data-target="#testimoniesCarousel" data-slide-to="1" class="active" 
     li data-target="#testimoniesCarousel" data-slide-to="2" class="active" 
     li data-target="#testimoniesCarousel" data-slide-to="3" class="active" 
     li data-target="#testimoniesCarousel" data-slide-to="4" class="active" 
     .carousel-inner role="listbox" 
     .item.active 
      = image_tag("losangelesskyline.jpg", :class => "img-responsive") 
      h2.center Testimonials 
      p This is LA 
     .item 
      = image_tag("newyorkskyline.jpg") 
      p This is NY 
     .item 
      = image_tag("miamiskyline.jpg") 
      p This is Miami 
     .item 
      = image_tag("bostonskyline.jpg") 
      p This is Boston 
     .item 
      = image_tag("atlantaskyline.jpg") 
      p This is Atlanta 
     a.left.carousel-control href="#testimoniesCarousel" role="button" data-slide="prev" onclick="" 
     span.glyphicon.glyphicon-chevron-left aria-hidden="true" 
     span.sr-only Previous 
     a.right.carousel-control href="#testimoniesCarousel" role="button" data-slide="next" onclick="" 
     span.glyphicon.glyphicon-chevron-right aria-hidden="true" 
     span.sr-only Next

そして、ここでは私のSCSSが

.carousel-control.left, .carousel-control.right { 
    background-image: none 
} 

#testimonialsSection { 
    height: 70%; 
    width: 100%; 
} 

#testimoniesCarousel { 
    width: 100%; 
    height: 100%; 

    h3 { 
     font-size: 300%; 
    } 
    p { 
     text-align: center; 
     margin-left: 5%; 
     margin-right: 5%; 
     font-size: 200% !important; 
    } 
    img { 
     position: absolute; 
     height: 70%; 
     width: 100%; 
    } 
    .carousel-control.left .glyphicon { 
     position: absolute; 
     left: 0; 
     top: 35%; 
     margin-left: 0; 
     color: #D6D6D6; 
    } 
    .carousel-control.right .glyphicon { 
     position: absolute; 
     right: 0; 
     top: 35%; 
     margin-right: 0; 
     color: #D6D6D6; 
    } 
}

である任意の助けいただければ幸いです。

出典

2016-11-17 Nick Gilbert