有没有办法在javascript中进行反射但淡化反射的底部？

Question

我正在尝试在 javascript 中进行反射，因为某些浏览器不支持 webkit css 反射。我创建了另一个图像并将其反转，同时降低了它的不透明度。示例：https://jsfiddle.net/dppt48cm/1/。

refImage.onload = function(){
    refImage.style.position = "absolute";
    refImage.style.left = "0px";
    refImage.style.top = "400px";
    refImage.style.transform = "scaleY(-1)";
    refImage.style.opacity = "0.4";
    divElement.appendChild(refImage);
}

我在这里设置“反射”但创建另一个图像。

我现在要做的是调整反射的长度。例如，我不想在倒影中显示狗的头部。是否可以在鼻子处停止反射或以像素为单位设置反射？

Answer 1

您可以使用剪辑样式属性。

refImage.style.clip = "rect(150px, 400px, 400px, 0px)";

https://jsfiddle.net/dppt48cm/6/

Answer 2

你可以使用一个由图片和渐变组成背景的div来模拟webkit CSS反射：

var divElement = document.getElementById("test");
var newImage = new Image();

newImage.onload = function() {
  newImage.style.position = "absolute";
  newImage.style.left = "0px";
  newImage.style.top = "0px";
  divElement.appendChild(newImage);

  //Reflection  
  var div = document.createElement('div');
  div.className = 'reflection-image';
  div.style.width = this.width + 'px';
  div.style.height = (this.height * 0.7) + 'px';
  div.style.backgroundImage = "url('" + this.src + "')";
  div.style.left = "0px";
  div.style.top = "400px";
  divElement.appendChild(div);
}

newImage.src = "https://3.bp.blogspot.com/-W__wiaHUjwI/Vt3Grd8df0I/AAAAAAAAA78/7xqUNj8ujtY/s400/image02.png";

body {
  background-color: white;
}
.reflection-image {
  position: absolute;
  background: 0 bottom no-repeat;
  transform: scaleY(-1);
}
.reflection-image:after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#ffffff+0,ffffff+100&1+0,0.7+100 */
  background: -moz-linear-gradient(top, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0.7) 100%);
  /* FF3.6-15 */
  background: -webkit-linear-gradient(top, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0.7) 100%);
  /* Chrome10-25,Safari5.1-6 */
  background: linear-gradient(to bottom, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0.7) 100%);
  /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#b3ffffff', GradientType=0);
  /* IE6-9 */
}

<div class="tinted-image" id="test">

</div>

Answer 3

我认为你最好的选择是使用linear-gradient。它有更广泛的支持。

见https://jsfiddle.net/dppt48cm/12/

说明： 在这种情况下，我使用了:after 伪元素来应用渐变。我还删除了图像的onLoad，因为它会导致图像顺序发生变化，并将它们设置为display:block，以便反射位于原始图像下方。

JS

var divElement = document.getElementById("test");
var newImage = new Image();
var refImage = new Image();

newImage.src = "https://3.bp.blogspot.com/-W__wiaHUjwI/Vt3Grd8df0I/AAAAAAAAA78/7xqUNj8ujtY/s400/image02.png";
refImage.src = "https://3.bp.blogspot.com/-W__wiaHUjwI/Vt3Grd8df0I/AAAAAAAAA78/7xqUNj8ujtY/s400/image02.png";
refImage.style.transform = "scaleY(-1)";

divElement.appendChild(newImage);
divElement.appendChild(refImage);

CSS

#test {
   position: relative;
}
#test:after {
    content:"";
    width: 100%;
    height: 50%;
    position: absolute;
    bottom: 0;
    left: 0;
    background: linear-gradient(to bottom, rgba(255, 255, 255, .40) 0%, rgba(255, 255, 255, 0.75) 49%, rgba(255, 255, 255, 1) 80%);
}

img {
  display: block;
}