次の色をどのようにしてフッタに重ねることができますか？

Question

選択可能なフッターテキストを使用して、次の色をフッタに重ねる方法を教えてください。私はachiveしようとするもの画像：

Additianal質問：今、私は背景のpng画像（60％の不透明度）との絶対位置のdivで（テキスト選択ではない）、これを行う、多分方法は、SVGに見て、より正確であることができ、キャンバス？

Answer 1

テキストとともに拡大するダイナミックなライト効果が必要な場合。これはそれを達成するための一つの方法です。 JavaScriptは、divコンテナとエフェクトを内側の段落のサイズに拡大できるアニメーションを表示するためにのみ存在します。

私は斜めの線を得るためにdivに回転した擬似要素を使用しています。コンテナの右端から常に一定の幅を保つように配置されています。コンテナには、効果を維持するためにoverflow: hiddenがあります。

var str = '<p>footer with text (pinned to bottom)</p>', 
 
    i = 0, 
 
    isTag, 
 
    text; 
 

 
(function type() { 
 
    text = str.slice(0, ++i); 
 
    if (text === str) return; 
 
    
 
    document.querySelector('div').innerHTML = text; 
 

 
    var char = text.slice(-1); 
 
    if(char === '<') isTag = true; 
 
    if(char === '>') isTag = false; 
 

 
    if (isTag) return type(); 
 
    setTimeout(type, 80); 
 
}());

div { 
 
    overflow: hidden; 
 
    padding-right: 6rem; 
 
    background-color: #f80; 
 
    border: 1px solid #000; 
 
    white-space: nowrap; 
 
    position: fixed; 
 
    bottom: 0; 
 
    left: 50%; 
 
    transform: translateX(-50%); 
 
} 
 
p { 
 
    padding: 1rem 6rem; 
 
    padding-right: 0; 
 
    background-color: #eb8; 
 
    color: rgba(0, 0, 0, 0.5); 
 
    position: relative; 
 
    z-index: 1; 
 
} 
 
div::after { 
 
    content: ""; 
 
    width: 6rem; 
 
    height: 6rem; 
 
    background-color: #eb8; 
 
    position: absolute; 
 
    transform: rotate(45deg); 
 
    top: 1rem; 
 
    right: 3rem; 
 
}

<style> 
 
    * { 
 
    margin: 0; 
 
    } 
 
    html, 
 
    body { 
 
    height: 100%; 
 
    } 
 
    body { 
 
    font-family: sans-serif; 
 
    } 
 
</style> 
 

 
<div> 
 
    <p> 
 
    footer with text (pinned to bottom) 
 
    </p> 
 
</div>

更新：あなたがしたいすべては、あなたがより高いZにCSSでpointer-events: none;を使用することができますz-index高いと一番上の要素の下にテキストを選択することが可能である場合-indexed要素は、上層の要素のすべてのマウスイベントを無視し、下にあるテキストを、要素が存在しないかのように上の要素を介してカーソルに反応させます。