用css中clip属性剪裁绝对定位图片（以及写多种颜色的圆）

最新推荐文章于 2021-06-15 16:18:32 发布

蓝图Lily

最新推荐文章于 2021-06-15 16:18:32 发布

阅读量455

点赞数

文章标签： css

本文链接：https://blog.csdn.net/qq_39288987/article/details/102840543

版权

clip定义

clip 属性剪裁绝对定位元素。

当一幅图像的尺寸大于包含它的元素时会发生什么呢？“clip” 属性允许您规定一个元素的可见尺寸，这样此元素就会被修剪并显示为这个形状。

说明
这个属性用于定义一个剪裁矩形。对于一个绝对定义元素，在这个矩形内的内容才可见。出了这个剪裁区域的内容会根据 overflow 的值来处理。剪裁区域可能比元素的内容区大，也可能比内容区小。
在这里插入图片描述
可能的值
所有主流浏览器都支持 clip 属性。
但是任何的版本的 Internet Explorer （包括 IE8）都不支持属性值 “inherit”。

用法

clip:rect(top,right,bottom,left)
top:默认是0px，表示不裁剪上边的，数值为几，表示图片从上面裁剪掉几
right:默认是图片的宽度，数值为几，表示宽度剩几
bottom:默认是图片的高度，数值为几，表示高度剩几
left:默认是0px，表示不裁剪左边，数值为几，表示图片从左边裁剪掉几

裁剪一张图片
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>一个有多种颜色的圆形</title>
    <style>
      img {
        display: block;
        width: 400px;
        height: 400px;
        position: absolute;
        /* clip: rect(0px 200px 200px 0px); */
      }
    </style>
  </head>
  <body>
    <img src="https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=3608155120,1630233151&fm=26&gp=0.jpg" alt="" />
  </body>
</html>

原图是网上随便找的一张图
在这里插入图片描述
裁剪后的图片是

例如使用css写一个左右颜色不一样的圆
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>一个左右颜色不一样的圆</title>
    <style>
      .circle {
        width: 200px;
        height: 200px;
        border-radius: 50%;
        position: absolute;
      }
      .c1 {
        background-color: yellow;
        clip: rect(0px 100px 200px 0px);
      }
      .c2 {
        background-color: #ff0095;
        clip: rect(0px 200px 200px 100px);
      }
    </style>
  </head>
  <body>
    <div class="circle c1"></div>
    <div class="circle c2"></div>
  </body>
</html>

效果如下图所示：
在这里插入图片描述
还可以写更多颜色的圆，下面是四色的圆。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>一个有多种颜色的圆形</title>
    <style>
      .circle {
        width: 200px;
        height: 200px;
        border-radius: 50%;
        position: absolute;
      }
      .c1 {
        background-color: yellow;
        clip: rect(0px 100px 200px 0px);
      }
      .c2 {
        background-color: #ff0095;
        clip: rect(0px 200px 200px 100px);
      }
      .c3 {
        background-color: #06b906;
        clip: rect(100px 200px 200px 0px);
      }
      .c4 {
        background-color: #002280;
        clip: rect(100px 200px 200px 100px);
      }
    </style>
  </head>
  <body>
    <div class="circle c1"></div>
    <div class="circle c2"></div>
    <div class="circle c3"></div>
    <div class="circle c4"></div>
  </body>
</html>

效果如下：
在这里插入图片描述

蓝图Lily

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
用css中clip属性剪裁绝对定位图片（以及写多种颜色的圆）

clip定义clip 属性剪裁绝对定位元素。当一幅图像的尺寸大于包含它的元素时会发生什么呢？“clip” 属性允许您规定一个元素的可见尺寸，这样此元素就会被修剪并显示为这个形状。说明这个属性用于定义一个剪裁矩形。对于一个绝对定义元素，在这个矩形内的内容才可见。出了这个剪裁区域的内容会根据 overflow 的值来处理。剪裁区域可能比元素的内容区大，也可能比内容区小。所有主流浏览器都支...
复制链接

扫一扫