我可以仅在底部椭圆形修剪蒙版吗? [英] Can I ellipse a clipping mask on the bottom only?

问题描述

我正在尝试在CSS中的图像上创建弯曲的剪贴蒙版.

I am trying to create a curved clipping mask on an image in CSS.

曲线基本上只是一个非常宽的椭圆的下半部.

The curve is essentially just the bottom half of a very wide ellipse.

一个要求是，角度/曲率不会根据图像的高度/宽度而变化-应该始终保持一致.

A requirement is that the angle/curvature does not change based on the height/width of the image - it should always stay consistent.

这是视觉效果:

尝试1:边界半径/溢出隐藏/固定宽度

问题:图像的高度影响曲率，没有最大宽度

img { max-width: 100%; vertical-align: top; }
.block { max-width: 320px; background: blue; }
.block-2 { max-width: 200px; background: blue; }

.curve {
  overflow: hidden;
  width: 500px;
  position: relative;
  top: 0;
  left: 50%;
  margin-left: -250px;
  text-align: center;
  border-bottom-left-radius: 50%;
  border-bottom-right-radius: 50%;
}

<div class="block">
  <div class="curve">
    <img src="http://placehold.it/320x180" />
  </div>
</div>

<br />

<div class="block-2">
  <div class="curve">
    <img src="http://placehold.it/320x100" />
  </div>
</div>

尝试2:显而易见的一种-裁剪图像

问题:尺寸之间仍然不一致，但接近.但是，客户端/CMS可能意味着没有选择.

尝试3:剪切路径

问题:不一致的曲线，平键支持，完全不支持IE

http://caniuse.com/#feat=css-clip-path

.img1 { 
  max-width: 240px; 
  clip-path: ellipse(150% 100% at 50% 0); 
  -webkit-clip-path: ellipse(150% 100% at 50% 0); 
}
.img2 { 
  max-width: 320px; 
  clip-path: ellipse(150% 100% at 50% 0);
  -webkit-clip-path: ellipse(150% 100% at 50% 0);
}
.img3 { 
  max-width: 640px; 
  clip-path: ellipse(150% 100% at 50% 0);
  -webkit-clip-path: ellipse(150% 100% at 50% 0);
}

<img src="http://placehold.it/640x320" class="img1" />
<img src="http://placehold.it/550x100" class="img2" />
<img src="http://placehold.it/640x320" class="img3" />

尝试4:CSS掩码

问题:受宽度/高度影响的曲线不一致，不支持IE.

img { 
  mask: url(http://s17.postimg.org/qo8izn6kf/mask.png) top center / 120% 100%; 
  -webkit-mask: url(http://s17.postimg.org/qo8izn6kf/mask.png) top center / 120% 100%;
}

<img src="http://placehold.it/640x320" width="240" />
<img src="http://placehold.it/640x320" width="320" />

<br />

<img src="http://placehold.it/640x100" width="480"/>
<img src="http://placehold.it/200x200" />

尝试5:反向图像裁剪

问题:依赖于其他带有烘烤颜色的图像.类似于尝试2-非常接近

body { background: red; }
div { position: relative; display: inline-block; }
img { max-width: 100%; vertical-align: top; }
.mask { position: absolute; bottom: 0; left: 0; right: 0; width: 100% }

<div>
  <img src="http://placehold.it/640x320" width="320" />
  <img class="mask" src="http://s15.postimg.org/c37ncbvxn/curve_mask.png" />
</div>

<br /><br />

<div>
  <img src="http://placehold.it/640x320" width="480" />
  <img class="mask" src="http://s15.postimg.org/c37ncbvxn/curve_mask.png" />
</div>

<br /><br />

<div>
  <img src="http://placehold.it/300x300" />
  <img class="mask" src="http://s15.postimg.org/c37ncbvxn/curve_mask.png" />
</div>

<br /><br />

<div>
  <img src="http://placehold.it/1200x300" />
  <img class="mask" src="http://s15.postimg.org/c37ncbvxn/curve_mask.png" />
</div>

推荐答案

尝试6:透明:在出现超大边界+溢出之前

问题:具有固定大小，但只要大于站点宽度/图像高度就可以使用！虽然感觉很脏...

注意:虽然曲线看起来不相等，但它们都是具有相同曲率/角度的精确块.

Note: whilst the curves do not look equal, they are all accurate chunks of the same curvature/angle.

div { position: relative; display: inline-block; overflow: hidden; }
img { max-width: 100%; vertical-align: top; }

div:before { 
  content: ""; 
  position: absolute; 
  bottom: -100px; 
  left: 50%; 
  margin-left: -900px;
  height: 1000px;
  width: 1600px;
  border-radius: 100%; 
  border: 100px solid #fff;
}

<div><img src="http://placehold.it/320x120" /></div>
<div><img src="http://placehold.it/480x240" /></div>
<div><img src="http://placehold.it/100x220" /></div>

帽子提示: http://jonmifsud.com/blog/inverse -border-radius-in-css/

这篇关于我可以仅在底部椭圆形修剪蒙版吗?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！