Gibt es eine Möglichkeit, eine Reflektion in Javascript zu machen, aber die Unterseite der Reflektion wegzulassen?

Question

Ich versuche eine Reflektion in Javascript zu machen, da einige Browser die CSS Reflektion nicht unterstützen. Ich habe ein anderes Bild erstellt und es invertiert, während ich seine Opazität verringert habe. Beispiel: 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); 
} 

Ich stelle die "Reflexion" hier aber ein neues Bild erstellen.

Was ich versuche, ist jetzt, die Länge der Reflexion einzustellen. Zum Beispiel möchte ich den Kopf des Hundes nicht in der Reflexion zeigen. Wäre es möglich, die Reflexion an der Nase zu stoppen oder die Reflexion in Pixeln zu setzen?

Answer 1

Sie können die Clip-Stil-Eigenschaft verwenden.

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

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

Answer 2

Sie ein div mit einem Hintergrund von Bild und Gradienten zusammengesetzt verwenden können die webkit CSS Reflexion zu simulieren:

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

Ich denke, die beste Wahl ist zu verwenden linear-gradient. Es hat viel breitere Unterstützung.

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

Erläuterung: In diesem Fall habe ich ein :after Pseudoelement verwendet, um die Gradienten anzuwenden. Ich habe auch die onLoad für die Bilder entfernt, weil es die Bildreihenfolge variierte, und setzte sie auf display:block, so dass die Reflexion unterhalb des Originals sitzen wird.

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