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

Question

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

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" );

有关rgb alpha transperancy

的更多信息，请参阅http://css-tricks.com/rgba-browser-support/

使用纯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;
} 

Answer 2

请尝试一下，希望对您有所帮助

.bg{
opacity: 0.9;
background-repeat: no-repeat;
background-attachment: fixed;
}