How do I clip only the first image, and not the second?
Right now it’s clipping both.
<style>
img {
position: absolute;
clip-path: circle(85px at center);
}
</style>
<img src="https://i.imgur.com/BO6KOvw.jpg" width="170" height="112" style="top:40px;">
<image width="180" height="180" src="http://i.imgur.com/4HJbzEq.png" style="top:6;left:3;"> </image>
How do I place the image behind the transparent one?
And I understand it’s crooked on jsfiddle.
One thing at a time.
<style>
#img1 {
position: absolute;
clip-path: circle(85px at center);
}
</style>
<img id="img1" src="https://i.imgur.com/BO6KOvw.jpg" width="170" height="113" style="top:41px;left:13px;">
<img width="180" height="180" src="http://i.imgur.com/4HJbzEq.png">
I was just told there are a lot of issues with the above code.
I’m up to putting the image behind the transparent one.
<style>
#img1 {
position: absolute;
clip-path: circle(85px at center);
}
</style>
<img id="img1" src="https://i.imgur.com/BO6KOvw.jpg" width="170" height="113" style="top:33px;left:5px;">
<img width="180" height="180" src="http://i.imgur.com/4HJbzEq.png">
Wait…
That’s still not correct though.
I just hit a roadblock.
Image clip doesn’t work internet explorer.
I wouldn’t hold your breath waiting for MS to support it.
How do I put the image behind the window here?
<style>
#img1 {
position: absolute;
clip-path: circle(85px at center);
z-index:99;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.front {
position: absolute;
z-index: 98;
}
</style>
<div style="position:relative; width:180px; height:180px">
<img id="img1" src="https://i.imgur.com/BO6KOvw.jpg" width="170" height="113">
<img width="180" height="180" src="https://i.imgur.com/4HJbzEq.png" class="front">
</div>
I just did it here, does anything need to be fixed?
<style>
#img1 {
position: absolute;
clip-path: circle(85px at center);
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.front {
position: absolute;
}
</style>
<div style="position:relative; width:180px; height:180px">
<img id="img1" src="https://i.imgur.com/BO6KOvw.jpg" width="170" height="113">
<img width="180" height="180" src="https://i.imgur.com/4HJbzEq.png" class="front">
</div>
Can you explain how this works in internet explorer?
It uses: clipPath too
https://i.imgur.com/BKsB078.png.
<svg width="260" height="194">
<defs>
<clipPath id="circleView">
<circle cx="50%" cy="50%" r="85" transform="translate(90 90)" fill="orange"></circle>
</clipPath>
</defs>
<image x="50%" y="50%" transform="translate(-90 -90)" width="180" height="180" xlink:href="https://i.imgur.com/BO6KOvw.jpg" clip-path="url(#circleView)"></image>
<image x="50%" y="50%" transform="translate(-90 -90)" width="180" height="180" xlink:href="http://i.imgur.com/4HJbzEq.png"></image>
</svg>
There is a difference between the CSS clip-path property and the HTML clipPath element
In other words, if you want IE / Edge support, use the element, not the CSS
Wait a second, this code uses clip-path also, but it works in internet explorer, but how is that possible?
<svg width="260" height="194">
<defs>
<clipPath id="circleView">
<circle cx="130" cy="97" r="85" fill="orange"></circle>
</clipPath>
</defs>
<image x="40" y="7" width="180" height="180" xlink:href="https://i.imgur.com/BO6KOvw.jpg" clip-path="url(#circleView)"></image>
<image x="40" y="7" width="180" height="180" xlink:href="https://i.imgur.com/4HJbzEq.png"></image>
</svg>
Is there a difference between clip-path CSS and clip-path HTML?
That can’t be it cause
This doesn’t work in internet explorer, only firefox.
<img id="img1" width="170" height="113"src="https://i.imgur.com/BO6KOvw.jpg" style="clip-path: circle(85px at center);">
That is different.
There is the <clipPath> HTML element.
There is the the .class { clip-path: none; } CSS property.
There is the clip-path=“” attribute.
Why does it work in IE? I guess it supports it to some extent at least for now. But I’m not sure I would count on it too much. The only browser support reference I could find says “NeedsCompatTable”
I just read this.
IE only supports setting a clip-path on an SVG element.
I wonder why that is.
The clip-path CSS property:
This is an experimental technology
Check the Browser compatibility table carefully before using this in production.
https://developer.mozilla.org/en-US/docs/Web/CSS/clip-path
Experimental
Experimental can mean different things depending on the context you hear or read it in. When a technology is described as experimental on MDN, it means that the technology is nascent and immature, and currently in the process of being added to the Web platform (or considered for addition).
One or both of these will be true:
- It is implemented and enabled by default in less than two modern major browsers.
If one or both of these definitions is true, then you should think carefully before you start using that technology in any kind of production project (i.e. not just a demo or experiment). See also the definition of experimental in our browser-compat-data project.
What do you suggest would be a good alternative to clip-path that would be identical? That would go in here, or perhaps a different method of doing it altogether?
<svg width="260" height="194">
<defs>
<clipPath id="circleView">
<circle cx="130" cy="97" r="85" fill="orange"></circle>
</clipPath>
</defs>
<image x="40" y="7" width="180" height="180" xlink:href="https://i.imgur.com/BO6KOvw.jpg" clip-path="url(#circleView)"></image>
<image x="40" y="7" width="180" height="180" xlink:href="https://i.imgur.com/4HJbzEq.png"></image>
</svg>
This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.