JavaScriptのリフレクションを行う方法はありますか？反射の底を消していく方法はありますか？

Question

一部のブラウザではWebkit CSSのリフレクションをサポートしていないため、JavaScriptでリフレクションを実行しようとしています。別のイメージを作成し、不透明度を下げながらそれを反転しました。例：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

クリップスタイルプロパティを使用できます。あなたはWebKitのCSSの反射をシミュレートするために、画像やグラデーションで構成される背景を持つdiv要素を使用することができます

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

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

Answer 2

：

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を使用します。はるかに広いサポートを持っています。私は、グラデーションを適用する:after擬似要素を使用しました。この場合 ：

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

は、説明を参照してください。また、画像の順序が異なるため、画像の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; 
}