圆形遮罩的图像与使用只是图像本身和纯CSS

3df52oht 于 2023-07-01 发布在其他

关注(0)|答案(3)|浏览(119)

实际上，我想知道是否有可能使用单个伪元素将图像掩蔽为圆形形状，这是图像本身？假设这是一个矩形图像（不是正方形），你想让它被掩盖成一个圆形的形状，而不被挤压的图像？
所以你有：

HTML

<img src="#" class="mask">

CSS

.mask {
  A lot of CSS possibilities, up to you
}

我知道，使用父div和overflow:hidden & border-radius:50%是可能的，但是你能在不使用第二个伪元素的情况下做到这一点吗？

更新！

我注意到许多用户似乎认为我只是在寻找CSS代码border-radius:50%来创建圆形，但事实并非如此。图像应该变成圆形，而不是椭圆形。您可以简单地使用width和height彼此相等，但图像会被压缩。* 答案应包含非压缩图像结果 *

方案要求

图像应该是正圆，而不是椭圆
无论原始纵横比如何，图像都不应被挤压。* 即使你使用全景图片，你也只能看到中间部分是圆形的，其余部分被隐藏起来。*

css

来源：https://stackoverflow.com/questions/23545724/circular-mask-an-image-with-the-use-of-just-the-image-itself-and-pure-css

3条答案

按热度按时间

kkbh8khc1#

如果你只能使用img标签来生成一个覆盖自身的掩码，那么我能想到的唯一解决方法是：DEMO

.mask {
    width: 0px;
    height: 0px;
    border-radius: 100%;
    background:url(http://placehold.it/300x400) center;/* define position to choose clipped area */
    padding:50px;/* this makes a 100px square, so a perfect circle can be made with border-radius */
}

如果你可以使用一个 Package 器，它可以保持原来的空间使用的图像和面具可以解决任何地方的顶部通过坐标。DEMO
标记：

<div class="mask r150 top100 left150">
    <img src="http://placehold.it/300x400" />
</div>

CSS：

.mask {
    position:relative;
    overflow:hidden;
    display:inline-block;/* preserve display behavior of initila image to mask*/
    box-shadow:0 0 0 1px;/* show where i stands */
}
.mask img {
    display:block;/* a way to remove bottom gap*/
}
.mask:before {
    content:'';
    position:absolute;
    border-radius:100%;
    box-shadow:0 0 0 2000px white;
}
.r150:before {
    height:150px;
    width:150px;
}
.top100:before {
    top:100px; 
}
.left150:before {
    left:150px;
}

使用额外的类可以帮助您调整不同的大小和遮罩位置。

赞(0）回复(0）举报 2023-07-01

dsekswqp2#

此处小提琴：http://jsfiddle.net/8CuXQ/
就像这样：

.mask {
    width: 300px;
    height: 300px;
    border-radius: 150px;
    -webkit-border-radius: 150px;
    -moz-border-radius: 150px;
}

赞(0）回复(0）举报 2023-07-01

qf9go6mv3#

这个问题已经有将近十年的历史了，但我一直在寻找同样的功能，并偶然发现了这篇文章，似乎直接回答了OP的问题。
https://www.webfx.com/blog/web-design/circular-images-css/
他们的答案如下（我稍微调整了一个硬编码的偏移值，以选择此公共领域图像中的感兴趣区域）：

.circular--landscape { display: inline-block; position: relative; width: 200px; height: 200px; overflow: hidden; border-radius: 50%; } .circular--landscape img { width: auto; height: 100%; margin-left: -90px; }

<div class="circular--landscape"> <img src="https://3.bp.blogspot.com/-fedOyDjUayQ/UImafVhSpwI/AAAAAAAAAIM/SUDVxqzigkw/s1600/stock-graphics-vintage--58.jpg" />   </div>

赞(0）回复(0）举报 2023-07-01

我来回答

圆形遮罩的图像与使用只是图像本身和纯CSS

更新！

3条答案

相关问题

热门标签

最新问答