11

http://jsfiddle.net/MR94s/

.wrap {
    position: absolute;
    z-index: 777;
    top: 100%;
    left: 0;
    width: 100%;
    min-height: 100%;
    background-color: white;
    -webkit-overflow-scrolling: touch;
    -moz-transform: translateX(25%);
    -webkit-transform: translateX(25%);
    -o-transform: translateX(25%);
    -ms-transform: translateX(25%);
    transform: translateX(25%);
}

section {
    position: relative;
    width: 100%;
    display: table;
    height: 450px;
    border-bottom: 2px solid #E6EAED;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    padding: 20px;
    background-color: #333;
    background-repeat: repeat;
    background-position: center center;
    -webkit-background-size: 100%;
    -moz-background-size: 100%;
    -o-background-size: 100%;
    background-size: 100%;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    background-attachment: fixed;
    background-image: url('http://placekitten.com/600/600');
}

上記のフィドルを参照してください。私が取り組んでいるプロジェクトで同様の構造を使用しています。これは、セクションが交互に配置されたページで、1 つはコンテンツ用で、もう 1 つはカバーと固定の背景画像を備えた仕切りとして機能します。

正常に動作しますが、固定された背景またはその親を持つ要素に変換を適用すると、何らかの理由で、背景が完全に消えるか、画像の一部のアーティファクトと一部が残ります。

他のブラウザでは正常に動作します。解決策を探す運がなかったので、誰かが私を助けてくれることを願っています.

前もって感謝します！

4

3 に答える 3

4

私はChromeでのみ同じ問題を抱えていました。これが私の解決策でした：

// run js if Chrome is being used
if(navigator.userAgent.toLowerCase().indexOf('chrome') > -1) {
    // set background-attachment back to the default of 'scroll'
    $('.imagebg').css('background-attachment', 'scroll');

    // move the background-position according to the div's y position
    $(window).scroll(function(){

        scrollTop = $(window).scrollTop();
        photoTop = $('.imagebg').offset().top;
        distance = (photoTop - scrollTop);
        $('.imagebg').css('background-position', 'center ' + (distance*-1) + 'px');

    });
}
于 2014-01-13T23:45:17.420 に答える
1

私のサイトにも同じ問題がありました。Google 翻訳者はページのコンテンツを押し下げましたが、本文の背景画像は押し下げませんでした。これは私がそれを解決した方法です：

背景画像を含む新しい空の div を追加しました

 <div class="BackgroundImageBody></div>

これがCSSです

.BackgroundImageBody{
background: url('/WebRoot/Store/Shops/3077-120214/MediaGallery/design/fundo.jpg') repeat scroll 0% 0% #FFF !important;
height: 100%;
width: 100%;
position: absolute;
}

次に、JavaScript $.ready(function() を使用して、div を Google トランスレータの div に追加しました。

<script type="text/javascript">
// <![CDATA[
(function($){
$.ready(function(){

$(".BackgroundImageBody").appendTo(".skiptranslate");

});
})(jQuery);
// ]]>
</script>

http://www.photostation.pt/でこれが機能していることを確認できます 。これがお役に立てば幸いです。

アンドレアス (ahuber@viamodul.pt)

于 2014-07-30T14:00:51.040 に答える