我遇到了我的背景交叉淡化問題，但不工作。也許有人會告訴我我做錯了什麼？ :) 這裏的腳本：CSS背景交叉淡化問題

HTML：

<div class="bg"> 
    <div class="backgroundchange"> 
     <div class="bgimg" id="bg1"> 
      <div class="title centerV"> 
       <div> 
        <div class="text"> 
         <h1>Malarstwo</h1> 
         <p>Beaty Domanskiej</p> 
        </div> 
       </div> 
      </div> 
     </div> 
     <div class="bgimg" id="bg2"> 
      <div class="title centerV"> 
       <div> 
        <div class="text"> 
         <h1>Malarstwo</h1> 
         <p>Beaty Domanskiej</p> 
        </div> 
       </div> 
      </div> 
     </div> 
     <div class="bgimg" id="bg3"> 
      <div class="title centerV"> 
       <div> 
        <div class="text"> 
         <h1>Malarstwo</h1> 
         <p>Beaty Domanskiej</p> 
        </div> 
       </div> 
      </div> 
     </div> 
    </div> 
</div>

CSS：

.bgimg { 
    -webkit-background-size: cover; 
    -moz-background-size: cover; 
    -o-background-size: cover; 
    background-size: cover; 
    position: absolute; 
    background-repeat: no-repeat; 
    background-position: center center; 
    transform: scale(1); 
    -webkit-box-shadow: inset 4px 1px 77px 40px rgba(0,0,0,0.78); 
    -moz-box-shadow: inset 4px 1px 77px 40px rgba(0,0,0,0.78); 
    box-shadow: inset 4px 1px 77px 40px rgba(0,0,0,0.78); 
    top: 0; 
    left: 0; 
    height: 100%; 
    width: 100%; 
} 

#bg1 { 
    background-image: url("../img/gallery/slonecz.jpg"); 
} 

#bg2 { 
    background-image: url("../img/gallery/motyl.jpg"); 
} 

#bg3 { 
    background-image: url("../img/gallery/slonecz.jpg"); 
} 

@keyframes backgroundchangeFadeInOut { 
    0% { 
     opacity: 1; 
    } 

    17% { 
     opacity: 1; 
    } 

    25% { 
     opacity: 0; 
    } 

    92% { 
     opacity: 0; 
    } 

    100% { 
     opacity: 1; 
    } 
} 

@-webkit-keyframes backgroundchangeFadeInOut { 
    0% { 
     opacity: 1; 
    } 

    17% { 
     opacity: 1; 
    } 

    25% { 
     opacity: 0; 
    } 

    92% { 
     opacity: 0; 
    } 

    100% { 
     opacity: 1; 
    } 
} 

#backgroundchange div:nth-of-type(1) { 
    animation-delay: 8s; 
    -webkit-animation-delay: 8s; 
} 

#backgroundchange div:nth-of-type(2) { 
    animation-delay: 6s; 
    -webkit-animation-delay: 6s; 
} 

#backgroundchange div:nth-of-type(3) { 
    animation-delay: 4s; 
    -webkit-animation-delay: 4s; 
} 

#backgroundchange div { 
    animation-name: backgroundchangeFadeInOut; 
    animation-timing-function: ease-in-out; 
    animation-iteration-count: infinite; 
    animation-duration: 8s; 
    -webkit-animation-name: backgroundchangeFadeInOut; 
    -webkit-animation-timing-function: ease-in-out; 
    -webkit-animation-iteration-count: infinite; 
    -webkit-animation-duration: 8s; 
}

結果，我可以看到第一個背景設定，但它永遠不會交叉漸變成下一個。

來源

2017-01-07 Damian Doman

Banzay的答案實際上使其工作太棒了！ –

您的JavaScript邏輯和控制流程在哪裏處理功能？ HTML和CSS本身不足以滿足HTML5/CSS/JavaScript的真實動態可能性。編輯，以防我的微妙之處不夠清楚：您的HTML/CSS組合缺少第三個關鍵部分，使其成爲動態HTML5：JavaScript！ –

耶路撒冷，我知道JS實際上使它更容易達到這個目的，但我仍然需要在CSS中這樣做，因爲這種風格也會應用於其他元素。感謝您的評論/回答壽！ –

你想不服這樣嗎？

這裏是我的筆記本電腦工作的代碼：

CSS：

.bgimg { 
    -webkit-background-size: cover; 
    -moz-background-size: cover; 
    -o-background-size: cover; 
    background-size: cover; 
    position: absolute; 
    background-repeat: no-repeat; 
    background-position: center center; 
    transform: scale(1); 
    -webkit-box-shadow: inset 4px 1px 77px 40px rgba(0,0,0,0.78); 
    -moz-box-shadow: inset 4px 1px 77px 40px rgba(0,0,0,0.78); 
    box-shadow: inset 4px 1px 77px 40px rgba(0,0,0,0.78); 
    top: 0; 
    left: 0; 
    height: 100%; 
    width: 100%; 
    background-image: url("../img/gallery/slonecz.jpg"); 
    animation-name: backgroundchangeFadeInOut; 
    animation-timing-function: ease-in-out; 
    animation-iteration-count: infinite; 
    animation-duration: 8s; 
    -webkit-animation-name: backgroundchangeFadeInOut; 
    -webkit-animation-timing-function: ease-in-out; 
    -webkit-animation-iteration-count: infinite; 
    -webkit-animation-duration: 8s; 
} 

@keyframes backgroundchangeFadeInOut { 
    0% { 
     background-image: url("../img/gallery/slonecz.jpg"); 
    } 
    50% { 
     background-image: url("../img/gallery/motyl.jpg"); 
    } 
    100% { 
     background-image: url("../img/gallery/slonecz.jpg"); 
    } 
}

HTML：

<div class="bg"> 
    <div class="backgroundchange"> 
     <div class="bgimg" id="bg1"> 
      <div class="title centerV"> 
       <div> 
        <div class="text"> 
         <h1>Malarstwo</h1> 
         <p>Beaty Domanskiej</p> 
        </div> 
       </div> 
      </div> 
     </div> 
    </div> 
</div>

來源

2017-01-07 14:54:50 Banzay

首頁實際上看起來像這樣：https://s29.postimg.org/abjplgptj/example.jpg我想讓背景圖像通過無限循環淡入另一個。當我運行你的代碼片段時，它只是每隔幾秒就閃爍一次，所以不確定它是否有效，試圖在一秒內將它實現到我的代碼中 –

我改變了答案。看看 – Banzay

哇，你是一個編碼賽車哈哈哈，我已經半途而廢了，當你發佈這個答案：P –

如果不設置css @keyframe，則無法設置動畫。

關鍵幀添加到您的所有動畫這裏是下面一個例子：

@-webkit-keyframes backgroundchangeFadeInOut{ 
      0% {transform: translateY(-100%); opacity: 0;} 
      80% {transform: translateY(40%);} 
      100% {transform: translateY(0%); opacity: 1;} 
     }

來源

2017-01-07 14:45:52

已經設置了幾個關鍵幀，也實現了你提供的那個，但仍然沒有效果，想知道我在哪裏犯了一個錯誤。糾正我，如果我即使錯了 - 我可以把任何關鍵幀代碼放入我的css文件，它不需要在它涉及的樣式之後正確嗎？ –

CSS背景交叉淡化問題

回答

CSS：

HTML：

相關問題