好吧,所以我搜索了周圍的loooong,並擺弄這個和我似乎無法得到它的工作。據我所知,我不能將css反射添加到背景中,而我正在使用background-image屬性創建動畫BG。我希望BG能反射到我的表面上,這是一個放在BG上方的DIV盒子,並設置在較低的不透明度上。爲了創建使用兩個不同背景圖像屬性的反射im,一個在另一個下方,圖像反轉並且具有完全相同的動畫。不能讓我的靈活的動畫背景反射工作
問題:當瀏覽器窗口改變高度尺寸時,底部動畫不會以與頂部一致的方式移動,看起來像一個反射(我基本上希望圖像中的兩個點都連接並保持排隊被溢出中斷的圖像:隱藏功能)
有沒有什麼辦法可以做到這一點?或者讓背景從頂部開始切割,而不是反射所連接的底部,所以它始終對齊?或者也許我只是繞了錯誤.....
注意我只是在隨機BG關扔谷歌這樣的人能看到它。在動畫中它會翻轉180度來模擬反射。 * *
編輯:Demo fiddle
CSS
* {
padding: 0;
margin: 0;
}
/*bg animation loop */
@keyframes animatedBg {
from {
background-position: -200px 0px;
}
to {
background-position: 1080px 0px;
}
}
/*if you have multiple things to position separate with a comma ex: : -200px 0px, 90px 80px,etc*/
@-webkit-keyframes animatedBg {
from {
background-position: -200px 0px;
}
to {
background-position: 1080px 0px;
}
}
@-ms-keyframes animatedBg {
from {
background-position: -200px 0px;
}
to {
background-position: 1080px 0px;
}
}
@-moz-keyframes animatedBg {
from {
background-position: -200px 0px;
}
to {
background-position: 1080px 0px;
}
}
#bgbox {
position: absolute;
top: 0;
height:2000px;
width: 2000px;
max-width: 100%;
max-height: 100%;
}
.bg {
z-index: -20;
position: fixed;
top: 0;
background-image: url(http://miriadna.com/desctopwalls/images/max/Orange-space.jpg);
width: 100%;
height: 70%;
max-height: 70%;
max-width: 100%;
background-position: -200px 0px, 0px 0px, 0px 0px;
background-repeat: repeat-x;
animation: animatedBg 90s linear infinite;
-ms-animation: animatedBg 90s linear infinite;
-moz-animation: animatedBg 90s linear infinite;
-webkit-animation: animatedBg 90s linear infinite;
overflow: hidden;
}
.bg2 {
z-index: -22;
position: fixed;
top: 30%;
bottom: -0.2%;
background-image: url(http://miriadna.com/desctopwalls/images/max/Orange-space.jpg);
width: 100%;
height: 100%;
max-height: 100%;
max-width: 100%;
background-position: 0px 0px, 0px 0px, 0px 0px;
background-repeat: repeat-x;
animation: animatedBg 90s linear infinite;
-ms-animation: animatedBg 90s linear infinite;
-moz-animation: animatedBg 90s linear infinite;
-webkit-animation: animatedBg 90s linear infinite;
overflow: hidden;
}
/*bg animation loop end */
#midground {
position: fixed;
bottom: 0;
left: 0;
height: 950px;
max-height: 30%;
width: 2000px;
maxwidth: 100%;
background-color: rgba(0, 0, 0, 0.71)
}
這裏是HTML:
HTML
<body>
<div id="bgbox">
<div class="bg"></div>
<div class="bg2"></div>
</div>
<div id="midground"></div>
</body>
任何幫助,非常感謝!
你可以嘗試使用after psuedo選擇器並在那裏使用高度+額外的背景圖像。你不得不在手前翻轉圖片/反射...但是這可能奏效。在電話上,所以演示比正常情況困難。 – dward
這裏有一篇文章就在這裏:http://designshack.net/articles/css/mastering-css-reflections-in-webkit/。 – dward
即時通訊的問題是,我無法對我的元素應用簡單的反射,因爲它的背景動畫,而不是我的div中的實際存在的東西,否則它確實是一個相當簡單的修復與文章描述的屬性。 – Eolis