Question

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

Answer 1

可能使用伪变换和混合混合模式:(不适用于ie！）：

黑色线性渐变用于混合/隐藏图像，它需要的尺寸是图像的两倍：这里我使用了200px高的图像，因此渐变需要为400px，其中一半是黑色而另一半是透明的。 / p>

＆＃13;

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;}

＆＃13;

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

＆＃13;

注意，等待直到任何意见之前加载背景图片，lorempixel.com有时会很慢）

带有全宽图像：

渐变必须变成透明黑色＆amp;透明png具有相同宽度和双倍高度的图像。

示例：

＆＃13;

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;}

＆＃13;

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

＆＃13;

Answer 2

根据我迄今为止的经验，我认为只翻转background-image的一部分是不可能的;至少用CSS3。

但是，您可以通过几种方式获得所需的结果（可能还有更多）：

•您可以创建一个拥有div背景图片的顶级height和width: 100%以使其背景正常，然后创建另一个div width: 100%再次和height屏幕的其余部分，您将平铺背景反转。

查看代码段中的结果。

#div1 {
  height: 100px;
  background: url("http://cdn.backyardchickens.com/e/ed/200x400px-LL-ed0a9036_image.jpeg");
  background-size: 100px 100px;
  background-repeat: repeat-y;
}
#div2 {
  height: 500px;
  background: url(http://cdn.backyardchickens.com/e/ed/200x400px-LL-ed0a9036_image.jpeg);
  background-size: 100px 100px;
  background-repeat: repeat-y;
  /*Invert*/
  -moz-transform: scaleY(-1);
  -o-transform: scaleY(-1);
  -webkit-transform: scaleY(-1);
  transform: scaleY(-1);
}

<div id="div1"></div>
<div id="div2"></div>

•或者，您可以创建与屏幕尺寸相同的图像，设置所需的效果，然后将该图像用作background-image。

Answer 3

继续我的评论之后，我认为最简单，也许唯一的方法就是创建一个新图像。所以说你从这张图片开始：

通过翻转图像并将其添加到底部，您可以得到：

那么你可以简单地在你的CSS中替换你当前的网址并获得这个：

＆＃13;

body {
  background-image: url(http://i.stack.imgur.com/KxF8o.png);
  background-repeat: repeat-y;
  background-size:cover;
  }

＆＃13;

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

3 个答案: