Bildrrand transparent machen

[crusico]

Hi to @ll,

gibt es eine Möglichkeit ein eingefügtes Bild, die Ränder transparent oder verlauf zum Hintergrundfarbe zu machen?
Also nicht mit border, sondern direkt das Bild benutzen.

 

[crusico]

https://picload.org/infonail/darlorda/bild1.jpg

Danke , genau das habe ich gesucht!

Leider wird bei mir nur 3 Ränder transparent dargestellt und das rechte nicht...
wenn ich das so schreibe: <img src="Bilder/1.jpg" width="85%" height="85%">

lasse ich die width="85%" height="85%" weg, klappt es, aber das Bild wird zu groß dargestellt.

Auch wenn ich das in
img {
vertical-align:top;
width: 85%;
height: 85%;
}
erhalte ich das gleich Ergebnis :-(

 

[basti1012]

auf dein bild kann man leider gar nix sehen.
hast du mal versucht das bild was kleiner ist mit margin-left und margin-right mal ein stück weg zu schieben? Das höhrt sich an das das Bild von irgendwas bedeckt wird oder so

 

[crusico]

Also wie schon oben gesagt, auch mit dein Code:

1. img {
2. vertical-align:top;
3. width: 85%;
4. height: 85%;
5. }
   funktioniert es nicht, siehe [https://picload.org/view/dadgccpa/rahmen.jpg.html]

1. 
   mit :

img {
vertical-align:top;
width: 225px;
height: auto;
}
klappt das schon, aber ich möchte gern die 85% Größe dargestellt bekommen.

 

[djheke]

So vielleicht?
https://jsfiddle.net/e8dL9e7b/1/

 

[crusico]

Danke, so funktioniert das bei 85%, wenn ich jetzt aber 80% mache nicht mehr :-) Aber ich war ja auf der suche nach 85% :-)

 

[djheke]

Dann änderst Du right:15% auf right:20%.

figure:after {
content:"";
position:absolute;
left:0;
right:15%;
top:0;
bottom:0;
box-shadow: inset 0 0 20px 20px #fff;
}
img {