css 不透明度也会影响其他元素

Question

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

目前通过使用两层背景图像使其运行良好。为了在底层显示新图像，我们淡出顶层（不透明度 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 inside 放置在 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 的 click 函数来切换效果。

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/

Answer 2

+++如果你觉得用css opacity transitions来切换背景图片更好，只用一个div ie)#background1，你可以使用这段代码

$(document).ready(function() {
   $('#toggle').click(function(e) {
       e.preventDefault();        
       $('#background1').toggleClass('color1');
   });
});

body {
    background-color: #f8f8f8;
    color: #555;
}.container {
    position: relative;
    margin: 30px auto;
    padding: 20px;
    width: 200px;
    height: 150px;
    background-color: #fff
}
form {
    position: relative;
    z-index: 10;
}
input[type=text] {
    margin: 10px 0;
    padding: 5px;
    width: calc(100% - 10px);
    font-size: 15px;
    outline: none;
}
input[type=submit] {
    width: 100%;
    text-transform: uppercase;
    font-size: 15px;
    background-color: #333;
    color: #fff;
    border: none;
    cursor: pointer;
}
#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;
}
#background1.color1 {
    background-color: lightgreen;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div class="container">
     <div id="background1"></div> 
     <form>
        <h2>Awesome form!</h2>        
        <input type="text" placeholder="Some text here" />
        <input id="toggle" type="submit" value="Change now!" />
     </form>`enter code here`
</div>