Question

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

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

问题是我的文本形式与顶层一起淡出 - 我希望它保持可见。如何使其不受褪色的影响？

试图解决这个问题：

将#searchForm input或.formDiv的z-index设置为999999，认为这会将表单放在层次结构的顶部，这样它就不会受到下面转换的影响。但是，没有工作。
将#searchForm input或.formDiv的位置设为绝对值。来自http://www.w3schools.com/css/css_positioning.asp，＆＃34;从正常流程中移除绝对定位的元素。文档和其他元素的行为类似于绝对定位的元素不存在。＆＃34;
此stackoverflow帖子CSS3 Alternating table rows opacity affects text as well as background表示子元素也受不透明度的影响。我尝试将包含背景图像的div放在 formDiv类中，这样它就不会成为孩子。但即使没有不透明度，这也会得到顶部图像所覆盖的形式。

enter image description here

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转换来改变背景图像只能使用一个div即＃background1，你可以使用这个代码

＆＃13;

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

＆＃13;

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;
}

＆＃13;

<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>

＆＃13;

css不透明也容易影响其他元素

2 个答案: