javascript - 如何为 Twitter Bootstrap 添加覆盖到视差部分

Question

如何将叠加层添加到 Twitter Bootstrap 的视差部分？

下面是视差的代码:

HTML:

<div class="container-fluid">
<div>
<div class="ha-bg-parallax text-center block-marginb-none" data-type="background" data-speed="20">
    <div class="ha-parallax-body">
        <div class="ha-content ha-content-whitecolor">
            "Our main goal is to build a pixel perfect, one page parallax template with unlimited possibilities applicable for different businesses."
        </div>
        <div class="ha-parallax-divider-wrapper">
            <span class="ha-diamond-divider-md img-responsive"></span>
        </div>
        <div class="ha-heading-parallax">Spargo Team</div>
    </div>
</div>

CSS:

.ha-bg-parallax {
  background: url(http://thememove.com/shoot/white/assets/img/sample/1920x650/3.jpg) 50% -195px no-repeat fixed;
  -moz-background-size: cover;
  -o-background-size: cover;
  -webkit-background-size: cover;
  background-size: cover;
  height: 300px;
  margin: 0 auto;
  width: 100%;
  display: table;
  vertical-align: middle;
}

.ha-bg-parallax .ha-parallax-body {
  display: table-cell;
  vertical-align: middle;
}

.ha-bg-parallax .ha-content-whitecolor {
  font-size: 17px;
  color: #ffffff;
  width: 45%;
  margin: auto;
}

.ha-bg-parallax .ha-diamond-divider-md {
  margin: 15px 0px;
}

.ha-bg-parallax .ha-heading-parallax {
  font-style: italic;
  font-weight: bold;
  text-transform: none;
  color: #ffffff;
  padding-bottom: 0px;
}

div.clear{
  clear: both;
}

div.product-chooser{    
}

div.product-chooser.disabled div.product-chooser-item{
  zoom: 1;
  filter: alpha(opacity=60);
  opacity: 0.6;
  cursor: default;
}

div.product-chooser div.product-chooser-item{
  padding: 11px;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  border: 1px solid #efefef;
  margin-bottom: 10px;
  margin-left: 10px;
  margin-right: 10x;
}

div.product-chooser div.product-chooser-item.selected{
  border: 4px solid #428bca;
  background: #efefef;
  padding: 8px;
  filter: alpha(opacity=100);
  opacity: 1;
}

div.product-chooser div.product-chooser-item img{
  padding: 0;
}

div.product-chooser div.product-chooser-item span.title{
  display: block;
  margin: 10px 0 5px 0;
  font-weight: bold;
  font-size: 12px;
}

div.product-chooser div.product-chooser-item span.description{
  font-size: 12px;
}

div.product-chooser div.product-chooser-item input{
  position: absolute;
  left: 0;
  top: 0;
  visibility:hidden;
}

JS:

$(function () {
  "use strict";
  var $bgobj = $(".ha-bg-parallax"); // assigning the object
  $(window).on("scroll", function () {
    var yPos = -($(window).scrollTop() / $bgobj.data('speed'));
    // Put together our final background position
    var coords = '100% ' + yPos + 'px';
    // Move the background
    $bgobj.css({ backgroundPosition: coords });
  });
  $('div.product-chooser').not('.disabled').find('div.product-chooser-item').on('click', function(){
    $(this).parent().parent().find('div.product-chooser-item').removeClass('selected');
    $(this).addClass('selected');
    $(this).find('input[type="radio"]').prop("checked", true);
  });
});

我希望它能将叠加层添加到视差部分。我应该做哪些更改才能显示带叠加层的视差？

Answer 1

可能我没太明白你说的fade form是什么意思；

您是否尝试使用背景图像向 div 添加不透明度？

类似于:

ha-bg-parallax {
 /******/
opacity:0.5;
}

---

或者类似的东西:

div:after {
    content: "";
    background-color: #fff;
    opacity:0.5;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    position: absolute;

}