javascript - css opacity ease in out 影响其他元素

Question

我的页面中间有一个文本表单。目的是使用css opacity transitions通过淡入淡出切换背景图像。 (我会经常切换背景图片)

目前通过使用两层背景图像使其运行良好。为了在底层显示新图像，我们淡出顶层(不透明度从 1 到 0)。为了在顶层显示新图像，我们淡入顶层(不透明度从 0 到 1)。

问题是我的文本表单会随着顶层消失——我希望它保持可见。如何让它不受褪色的影响？

尝试解决这个问题:

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

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

3. 这篇 stackoverflow 帖子 CSS3 Alternating table rows opacity affects text as well as background表示子元素也受不透明度影响。我尝试将包含背景图像的 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;}

Answer 1

我做了一个小小摆弄，您可能会从中获得灵感，我只是使用一个类来切换不透明度，并将它们放在具有绝对位置的表单下，希望对您有所帮助:)

然后使用 jQuery 的点击功能来切换效果。

CSS:

form {
    position: relative;
    z-index: 10;
}

#background1 {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: lightblue;
    -webkit-transition: all 0.5s ease-in-out;
    -moz-transition: all 0.5s ease-in-out;
    -ms-transition: all 0.5s ease-in-out;
    -o-transition: all 0.5s ease-in-out;
    transition: all 0.5s ease-in-out;
}

#background2 {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: lightgreen;
    -webkit-transition: all 0.5s ease-in-out;
    -moz-transition: all 0.5s ease-in-out;
    -ms-transition: all 0.5s ease-in-out;
    -o-transition: all 0.5s ease-in-out;
    transition: all 0.5s ease-in-out;
}

.hide {
    opacity: 0;
}

http://jsfiddle.net/9jb68w2o/