[译]用CSS剪切圆形图片

canopus4u 发布于2019-08-28 18:21 / 3297人阅读

摘要：译用剪切圆形图片在这个教程，我们会介绍一下使用技巧来渲染出圆形的通过设置标签的所有的属性为正方形宽高的，我们就可以把这个标签变成圆的。长方形图片长方形图片会稍微有一点技巧一点。回顾这个技巧最好适用于正方形的标签，主题正好位于图片的中心。

<译>用CSS剪切圆形图片

在这个教程，我们会介绍一下使用CSS技巧来渲染出圆形的

CSS

.circular--squareP{
    border-radius:50%;
}

通过设置img标签的所有的border-radius属性为正方形宽/高的50%，我们就可以把这个img标签变成圆的。

长方形图片

长方形图片会稍微有一点技巧一点。

去渲染一个圆形，必须以圆形图片为基础

要解决这个问题，我们可以通过在img标签外面套一层div，然后我们通过将超过这个外层div的img标签的内容给裁掉来实现。具体的话可以通过将外层div的overflow属性设置为hidden。

为了能够让照片的主题不要被裁掉，我们必须要区别对待水平和垂直方向的图片。

水平方向的图片

HTML

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:-50%;
}

高度和宽度属性必须要保持一样来确保这个div（.circular--landscape）能够作为正方形渲染起来

除此之外，高度和宽度属性必须要等于或者小于img的高度。这能够确保img元素能够占满外层div而不会多出一部分空白

一般来说，水平方向图片的主题（但不一定）会位于图片的中心位置。为了能够让我们尽量不会把图片的主题裁剪啦，我们可以通过把图片往左移来弥补图片剪切的内容有点偏右的问题。

我们移动img标签的大小是外层div的25%，在这个例子中就是向左50px，我们可以通过设置margin-left的属性来完成设置

margin-left:-50px;

图片的主题会接近图片的水平方向中心的假设并不一定是对的，最好在你选择使用这个技巧的使用把这个假设记住。

垂直方向的图片

HTML

CSS

.circular--portrait{
    position:relative;
    width:200px;
    height:200px;
    overflow:hidden;
    border-radius:50%;
}

.circular--portrait img{
    width:100%;
    height:auto;
}

对于垂直方向上的图片的主题在垂直方向的中心的假设当然也不适用于每一个垂直方向上的图片。

和水平方向的图片类似，外层div的宽度和高度最好等于垂直方向图片你的宽度，这样的话可以产生最好的效果。

对于垂直方向的图片，我们把宽度设置为100%，高度设置为auto（和水平方向的图片相反）

我们不需要移动这个img元素，因为这张照片的主题就在上方中心位置。

回顾

这个技巧最好适用于正方形的img标签，主题正好位于图片的中心。但是，我们的世界并不是那么完美的，所有如果需求是这样，我们就可以使用div来把长方形img标签变圆。

CSS中用来负责把图片变圆的属性是border-radius，把边的圆角变成高度/宽度的50%就可以产生一个圆。

原文链接：circular-images-css

GPU云服务器云服务器 css圆形圆形css 图片剪切 php图片剪切

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/111191.html

如何使用CSS和SVG剪切和遮罩技术

摘要：通过结合使用和遮罩技术，你将会拥有更多的可能性去使用网络图像。在图像上应用遮罩元素为了使用得到一种感觉，我们将在图像上使用遮罩。浏览器支持在我们使用这种新的处理图像的方法之前，注意到浏览器对剪切和遮罩的支持不一致是非常重要的。本文转载自：众成翻译译者：hidoos链接：http://www.zcfy.cc/article/1100原文：https://getflywheel.com/...

hover_lew 2019-08-29 11:14 评论0 收藏0
[译] 负边距详解

摘要：正是因为没有很好地了解负边距才是导致各种奇怪的问题。不理解它负边距不会在的设计窗口展示出效果。有两种场景负边距是很重要的。微调元素这是负外边距最常也是最简单的使用方式。原文 The Definitive Guide to Using Negative Margins 自从1998年CSS2作为推荐以来，表格的使用渐渐退去，成为历史。正因为此，从那以后CSS布局成为了优雅代码的代名词。...

Vixb 2019-08-28 18:20 评论0 收藏0
[译] 负边距详解

摘要：正是因为没有很好地了解负边距才是导致各种奇怪的问题。不理解它负边距不会在的设计窗口展示出效果。有两种场景负边距是很重要的。微调元素这是负外边距最常也是最简单的使用方式。原文 The Definitive Guide to Using Negative Margins 自从1998年CSS2作为推荐以来，表格的使用渐渐退去，成为历史。正因为此，从那以后CSS布局成为了优雅代码的代名词。...

Richard_Gao 2019-08-01 14:53 评论0 收藏0
几个CSS技巧的分享

摘要：创建剪切动画对于剪切动画，使用代替，避免重排导致性能过低。其中属于万金油，大多数场景可以直接用它，但还是有些特殊的场景不能用子元素需要文字截断，为了兼容的浏览器，必须使用其他方式一般是子元素需要多行布局，的不支持，不能多行布局创建剪切动画对于剪切动画，使用clip-path代替width/height，避免DOM重排导致性能过低。 .animate { width: 200px...

itvincent 2019-08-29 15:28 评论0 收藏0