jquery - 如何设置背景图像离开前景图像的不透明度？

Question

我正在用 twitter bootstrap 实现一个 crousel，在我的 slider 上我有一个前景图像作为当前图像和背景图像作为下一个图像，现在我想设置背景图像的不透明度，如何设置它的不透明度？请在下面找到我的代码

CSS代码

.carousel
{
background-image:url("img_tree.png");
background-repeat:no-repeat;
} 

.carousel .item {
  align: 'center';
  margin-right: 10%;
  margin-left: 10%;
  background-color: black;
}

HAML 代码

  #carousel-example-generic.carousel.slide
    %ol.carousel-indicators
      %li.active{"data-slide-to" => "0", "data-target" => "#carousel-example-generic"}
      %li{"data-slide-to" => "1", "data-target" => "#carousel-example-generic"}
      %li{"data-slide-to" => "2", "data-target" => "#carousel-example-generic"}
    / Wrapper for slides
    .carousel-inner
      - images_for_carousel.each do |item|
        - if item == 1
          .item.active
            = image_tag("slide#{item}.jpg", :alt => "image_#{item}")
            .carousel-caption
        - else
          .item
            = image_tag("slide#{item}.jpg", :alt => "image_#{item}")
    / Controls
    = link_to("#carousel-example-generic", class: "left carousel-control", "data-slide" => "prev") do
      %span.icon-prev
    = link_to("#carousel-example-generic", class: "right carousel-control", "data-slide" => "next") do
      %span.icon-next

jquery代码

  $('#carousel-example-generic').carousel().on('slide.bs.carousel', function () {
    var previous_image_number = parseInt($('.carousel').css('background-image').match(/([0-9].jpg)/)) + 1;
    $('.carousel').css('background-image', 'url(' + '/assets/slide' + previous_image_number + '.jpg' + ')')
  })

图片

Answer 1

我希望我理解正确，你能试试这个吗:

编辑:对其进行分类

创建一个CSS类:

.imageBG {
        background: url(image.png);
        background-color: #fff; /* IE 8 */
        background-color: rgba(255,255,255,0.5);
        *background-color: #fff; /* IE 7 */
    }

用Jquery添加这个类:

$( "yourelement" ).addClass( "imageBG" );

参见 http://css-tricks.com/rgba-browser-support/有关 rgb alpha 透明度的更多信息

使用纯 jQuery，您可以像这样添加:

$("element").css({
"background": "url(image.png)",
"background-color": "#fff",
"background-color": "rgba(255,255,255,0.5)",
"*background-color": "#fff"
});

编辑

如果你想在 .carousel 元素上这样做，你可以这样做(不需要 jQuery，只需要 CSS):

.carousel
{
background:url("img_tree.png");
background-color: #fff; /* IE 8 */
background-color: rgba(255,255,255,0.5);
*background-color: #fff; /* IE 7 */
background-repeat:no-repeat;
}