javascript - 如何反转所有其他平铺背景图像？

Question

我知道仅使用 CSS 可以反转图像，但是背景图像的平铺效果如何？我有一个水平填充屏幕但垂直平铺的图像。我可以垂直翻转所有其他图像吗？

Answer 1

也许使用伪变换和混合混合模式:(不适用于 ie !):

黑色线性渐变用于混合/隐藏图像，它的大小需要是图像大小的两倍:这里我使用了 200 像素高的图像，所以渐变需要是 400 像素，其中一半是黑色，另一半是透明的。

html,
body {
  height: 100%;
  margin: 0;
}
html {
  background: linear-gradient(to bottom, transparent 50%, black 50%), url(http://lorempixel.com/200/200/nature/7);
  background-size: 400px 400px, auto;
}
html:before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(to bottom, transparent 50%, black 50%) bottom right, url(http://lorempixel.com/200/200/nature/7) bottom right;
  background-size: 400px 400px, auto;
  transform: scale(-1);
  mix-blend-mode: difference;
}

body {
  position:relative;
  z-index:1;
  display:flex;
  }
h1 {margin:auto;color:white;text-shadow:0 0 2px black;}

<h1> Mix-blend-mode test</h1>

注意，在任何意见之前等待背景图像加载，lorempixel.com 有时很慢)

---

全宽图片:

渐变必须变成半透明的黑色和透明 png，具有相同的宽度和两倍的图像高度。

例子:

html, body {
  height:100%;
  margin: 0;
}
html {
  background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAA2QAAAGQCAMAAAD2qlPcAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyJpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMC1jMDYxIDY0LjE0MDk0OSwgMjAxMC8xMi8wNy0xMDo1NzowMSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNS4xIFdpbmRvd3MiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6QkJDNEFDRDIyQzEwMTFFNkI2NTM5MTVCOTE0NUZFMkYiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6QkJDNEFDRDMyQzEwMTFFNkI2NTM5MTVCOTE0NUZFMkYiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDpCQkM0QUNEMDJDMTAxMUU2QjY1MzkxNUI5MTQ1RkUyRiIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDpCQkM0QUNEMTJDMTAxMUU2QjY1MzkxNUI5MTQ1RkUyRiIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/Puiwg40AAAAGUExURQAAAP///6XZn90AAAACdFJOU/8A5bcwSgAAAlNJREFUeNrs08EJAAAIA7G6/9IuUR9CMsLBJQAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAALwwwCmTgcnAZIDJwGRgMsBkYDIwGWAyMBlgMjAZmAwwGZgMTAaYDEwGJpMATAYmA0wGJgOTASYDk4HJAJOByQCTgcnAZIDJwGRgMsBkYDIwGWAyMBlgMjAZmAwwGZgMTAaYDEwGmAxMBiYDTAYmA5MBJgOTgckAk4HJAJOBycBkgMnAZGAywGRgMsBkYDIwGWAyMBmYDDAZmAxMBpgMTAaYDEwGJgNMBiYDkwEmA5MBJgOTgckAk4HJwGSAycBkYDLAZGAywGRgMjAZYDIwGZgMMBmYDDAZmAxMBpgMTAYmA0wGJgOTASYDkwEmA5OByQCTgcnAZIDJwGSAycBkYDLAZGAyMBlgMjAZmAwwGZgMMBmYDEwGmAxMBiYDTAYmA0wGJgOTASYDk4HJAJOBycBkgMnAZIDJwGRgMsBkYDIwGWAyMBlgMjAZmAwwGZgMTAaYDEwGJgNMBiYDTAYmA5MBJgOTgckAk4HJAJOBycBkgMnAZGAywGRgMjAZYDIwGWAyMBmYDDAZmAxMBpSsAAMAp3emP3IE2DAAAAAASUVORK5CYII=) top left, url(http://lorempixel.com/868/200/abstract/1) top left;
  background-size:100% auto, 100% auto;
}
html:before {
  content:'';
  position:absolute;
  top:0;
  left:0;right:0;bottom:0;
  background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAA2QAAAGQCAMAAAD2qlPcAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyJpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMC1jMDYxIDY0LjE0MDk0OSwgMjAxMC8xMi8wNy0xMDo1NzowMSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNS4xIFdpbmRvd3MiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6QkJDNEFDRDIyQzEwMTFFNkI2NTM5MTVCOTE0NUZFMkYiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6QkJDNEFDRDMyQzEwMTFFNkI2NTM5MTVCOTE0NUZFMkYiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDpCQkM0QUNEMDJDMTAxMUU2QjY1MzkxNUI5MTQ1RkUyRiIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDpCQkM0QUNEMTJDMTAxMUU2QjY1MzkxNUI5MTQ1RkUyRiIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/Puiwg40AAAAGUExURQAAAP///6XZn90AAAACdFJOU/8A5bcwSgAAAlNJREFUeNrs08EJAAAIA7G6/9IuUR9CMsLBJQAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAALwwwCmTgcnAZIDJwGRgMsBkYDIwGWAyMBlgMjAZmAwwGZgMTAaYDEwGJpMATAYmA0wGJgOTASYDk4HJAJOByQCTgcnAZIDJwGRgMsBkYDIwGWAyMBlgMjAZmAwwGZgMTAaYDEwGmAxMBiYDTAYmA5MBJgOTgckAk4HJAJOBycBkgMnAZGAywGRgMsBkYDIwGWAyMBmYDDAZmAxMBpgMTAaYDEwGJgNMBiYDkwEmA5MBJgOTgckAk4HJwGSAycBkYDLAZGAywGRgMjAZYDIwGZgMMBmYDDAZmAxMBpgMTAYmA0wGJgOTASYDkwEmA5OByQCTgcnAZIDJwGSAycBkYDLAZGAyMBlgMjAZmAwwGZgMMBmYDEwGmAxMBiYDTAYmA0wGJgOTASYDk4HJAJOBycBkgMnAZIDJwGRgMsBkYDIwGWAyMBlgMjAZmAwwGZgMTAaYDEwGJgNMBiYDTAYmA5MBJgOTgckAk4HJAJOBycBkgMnAZGAywGRgMjAZYDIwGWAyMBmYDDAZmAxMBpSsAAMAp3emP3IE2DAAAAAASUVORK5CYII=) bottom right, url(http://lorempixel.com/868/200/abstract/1) bottom right;
  background-size:100% auto, 100% auto;
  transform:scale(1,-1);
  mix-blend-mode:difference;
}
body {
  position:relative;
  z-index:1;
  display:flex;
  font-size:2vw
  }
h1 {margin:auto;color:#F9F3EE;text-shadow:0 0 2px #D999A3;}

<h1>Test via mix-blend-mode if your browser supports it !</h1>