CSS的不透明度也可以轻松影响其他元素

我的页面中间有一个文本形式。目的是使用css不透明度过渡通过淡入淡出切换背景图像。（我会经常切换背景图片）

目前，通过使用两层背景图像，它可以很好地工作。要在底层显示新图像，请淡出顶层（不透明度1到0）。要在顶层显示新图像，请在顶层淡入淡出（不透明度0到1）。

问题是我的文本表单随着顶层淡入淡出-我希望它保持可见状态。如何使其不受褪色影响？

尝试解决此问题：

1. 将z-index设置为#searchForm input或设置.formDiv为999999，以为这样会将表单放在层次结构的顶部，这样它就不会受到下面的过渡的影响。但是，没有用。

2. 将位置设置为#searchForm input或设置.formDiv为绝对。从http://www.w3schools.com/css/css_positioning.asp中，“从正常流程中删除了绝对定位的元素。文档和其他元素的行为就像不存在绝对定位的元素一样。”

3. CSS3的此stackoverflow发布交替表行的不透明度会影响文本，而背景说明子元素也会受到不透明度的影响。我试着将装有背景图像的DIV内的formDiv类，以便它不会是一个孩子。但是，即使没有不透明度，这也将使该表格被顶部图像覆盖。

function changeBackground(newUrl) {
    //check which layer is currently activated
    if ($('#background-image-top').hasClass('transparent')) {
        //place new image over top layer
        $('#background-image-top').css('background-image', 'url(' + newUrl + ')');
        //fade in new image
        $('#background-image-top').toggleClass('transparent');
    } else {
        //place new image over bottom layer
        $('#background-image-bot').css('background-image', 'url(' + newUrl + ')');
        //fade out old image
        $('#background-image-top').toggleClass('transparent');
    }
}

    #background-image-top {
    background-image: url("../images/default.jpg");
    background-repeat: no-repeat;
    background-position: center center;

    background-size: cover;
    -webkit-background-size:cover;
    -moz-background-size:cover;

    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;

    -webkit-transition: opacity 1s ease-in-out;
    -moz-transition: opacity 1s ease-in-out;
    -o-transition: opacity 1s ease-in-out;
    transition: opacity 1s ease-in-out; }

    #background-image-bot {
    background-repeat: no-repeat;
    background-position: center center;

    background-size: cover;
    -webkit-background-size:cover;
    -moz-background-size:cover;

    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;}

    .transparent {
    opacity: 0.25;}

    .formDiv {
    background-color: red;
    max-width: 500px;
    height: 50px;
    margin-left: auto;
    margin-right: auto;
    margin-top: 35%;}

    #searchForm input {
    width: 300px;
    height: 30px;
    font-size: 18px;}