Question

我的文字就像使用

的背景（正文图片）

#myContainer {
  width: 400px;
  height: 400px;
  position: relative;
  background: yellow;
}
#myAnimation {
  width: 50px;
  height: 100px;
  position: absolute;
  background-color: red;
}
#animate{
position:relative;
text-align:center;
-webkit-background-clip: text;
        -webkit-text-fill-color:transparent;
        z-index:20;}

        #normal{
        position:relative;
        color:yellow;
        z-index:22;
        text-align:center;}


<p>
<button onclick="myMove()">Click Me</button> 
</p>

<div id ="myContainer">
<div id ="myAnimation"></div>
<p id="animate">some text with background color</p>
<p id="normal">some text with yellow color</p>
</div>

我想在下面的示例中添加移动元素，但正如您所看到的，如果文本颜色设置为黄色，一切都可见，但是当文本设置为与背景图像相同时，您将看不到输出。

这是我的HTML

<script>
function myMove() {
  var elem = document.getElementById("myAnimation");   
  var pos = 0;
  var id = setInterval(frame, 10);
  var len = 50;
  var hei = 100;
  function frame() {
    if (pos == 80 && len <250) {
      pos=80;
      len++;

      elem.style.width = len + "px";

    } 
    else if (len >249) {
    hei--;

      elem.style.height = hei + "px";
    }

    else {
      pos++; 
      elem.style.left = pos + 'px'; 
    }
  }
}
</script>

我的Javascript

from twisted.internet.protocol import Protocol, Factory
from twisted.internet.endpoints import TCP4ServerEndpoint
from twisted.internet import reactor
from twisted.internet import task
from twisted.internet import protocol

#from screenhelp import ScreenHelp ** Not relevant to error


class Screen(Protocol):

    def __init__(self, factory):
        self.factory = factory
        self.connection = False
        self.loop = task.LoopingCall(screenRefresh)
        self.loopDeferred = None
        self.stack = []
        self.cs = ScreenHelp()

    def connectionMade(self):
        self.loopDeferred = self.loop.start(self,5)

    def connectionLost(self, reason):
        self.loop.stop(self)

    def dataReceived(self, data):
        self.stack.append(data)

    def screenRefresh(self):

        #self.transport.write(self.cs.clr()) ** Not relevent - issues clear screen command.
        for x in self.stack:
            self.transport.write(x)

class ScreenFactory(Factory):
    def buildProtocol(self, addr):
        return Screen()


def main():
    endpoint1 = TCP4ServerEndpoint(reactor, 64000)
    endpoint1.listen(ScreenFactory)
    reactor.listenTCP(5000, fact)
    reactor.run()


if __name__ == "__main__":
     main()

在示例中，我将背景颜色设置为黄色，将框设置为红色。在我的主项目中，我有全高清img和大约50个形状来创建动画文本。主要问题是当盒子（形状）覆盖带有id #animate文本的文本时，它应该留在主体背景（img）

Answer 1

完成工作xD示例pmwebdev.co.uk

背景代码：

body{
    background-image: url("bg.png");
    background-size: cover;
    background-attachment: fixed;
}

文字代码：

#slide1text{

    text-decoration-style: bold;
    margin: 0px;
    font-size: 30px;
    text-align: center;
    background-image: url("bg.png");
    background-size: cover;
    background-attachment: fixed;
    -webkit-background-clip: text;
    -webkit-text-fill-color:transparent;
    color: red;
    position: relative;
    z-index: 20;
}

文本作为背景。需要第二个背景，需要专家

1 个答案: