我怎么能实现下一个颜色重叠我的页脚？

Question

如何通过可选择的页脚文本实现下一个颜色重叠我的页脚？想象一下我想要实现的目标：

Additianal问题：现在我可以使用带有背景png图像（60％不透明度）的绝对定位div来执行此操作（文本无法选择），但是对于svg，canvas来说可能更正确吗？

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-index，你可以使用pointer-events: none;较高的z-indexed元素上的CSS忽略顶层元素上的所有鼠标事件，让下面的文本通过顶部的元素对光标作出反应，就好像它不存在一样。