CAPTCHA: have ideas for implementation

The idea of ​​how to implement the output of the image captcha came about by chance.
Perhaps this method has already been implemented by someone, I don’t know.

The bottom line is not to display the image using the “img” tag, but let's say using the “div” using styles, namely the background property, but that's not all. Background gives us the opportunity to repeat the image, therefore you can create an image that with a single output would not be meaningful, but repetition turned out to be an image that a person could recognize.
In general, better give an example.

Take the captcha from Yandex as the original image:


Now edit the image, namely, cut it into two halves and swap them, that's what happened:

')
Although it is not necessary to cut the picture this way, it depends on how you will use the styles.

And now the code:

<div style="background: url('captcha.png'); height: 60px; width: 200px"> </div>

If this code is inserted on the page, we get an image similar to the second picture.
We need to get a normal image that a person could recognize, so we add something and get:

<div style="background: url('captcha.png') -100px repeat-x; height: 60px; width: 200px"> </div>

As a result, we get a picture identical to the original image.
This is the easiest way to implement this idea, you can think further.

But a slightly different idea is more difficult to implement, but probably also interesting:

Suppose you display the image and part of it overlap with the background color, a person recognizes only the visible part of the captcha, and the robot recognizes the entire image and therefore cannot pass the test.