今日は、cssを使用してこの効果を得るための興味深い方法についてお話したいと思います。

デモ

チャレンジ：

テキストの高さがコンテナの高さを超える場合にのみフェードを表示します。 容器の寸法が示されていると考えられています。

解決策：

最初のステップ

まず、マークアップを作成します。 3つのブロックが必要です。

• テキスト自体のため;
• 補助支柱用。
• フェード用。

<div class="text"></div> <div class="helper"></div> <div class="fade"></div>
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

第二段階

主なアイデアは、2つのブロックが左にフロートする場合（フロート：左）、フロートする中間テキストの高さが最初のブロックの高さよりも大きい場合、またはそれよりも小さい場合は互いに隣接する場合、それらは互いに下に配置されるということです。 イラスト：







この場合、.textと.fadeがリークし、.helperが合理化されたテキストの役割を果たします。

 .text { float: left; width: 400px; } .helper { height: 400px; } .fade { float: left; width: 400px; height: 60px; background: url(fade.png) repeat-x; }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

補助要素の高さは、コンテナの高さに対応します。 .text（最初のリーク要素）が.helperよりも高い場合、.fadeは右にシフトします。

第三段階

そして、コンテナ内に表示されるように、幅の100％を左に移動して上に.fade動作を「反転」します。

 .fade { ... margin: -60px 0px 0px -400px; position: relative; } * html .fade { position: static; }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

フェードがテキストの上にくるように位置が必要です。

第4ステップ

コンテナといえば。

 <div class="container"> <div class="wrapper"> <div class="text"></div> <div class="helper"></div> <div class="fade"></div> </div> </div>
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

すべての要素をラップして、フローに余裕を持たせます。

 .wrapper { width: 5000px; height: 100%; } .helper { height: 100%; }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

そして、当初意図したとおりにコンテナを作成します。

 .container { width: 400px; height: 400px; overflow: hidden; border: 1px solid #aaa; }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

それだけです！

デモ