qq_17031883 2024-01-31 23:54 采纳率: 36.4%
浏览 58
已结题

图片怎么套上这种圆形遮罩

图片怎么套上这种圆形遮罩，图片怎么套上这种圆形遮罩，图片怎么套上这种圆形遮罩

img


img

  • 写回答

18条回答 默认 最新

  • 专家-赤兔[在线] 优质创作者: 编程框架技术领域 2024-01-31 23:54
    关注

    引自免费微信小程序：皆我百晓生

    为了在HTML5中为图片添加圆形遮罩，您可以使用CSS的border-radius属性将一个包含图片的div元素转换为圆形。以下是一个实现圆形遮罩的示例代码：

    <!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <style>
    .circular-mask {
      position: relative;
      display: inline-block;
    }
    
    .circular-mask img {
      /* 设置图片宽度和高度相等，以便于形成正圆 */
      width: 200px;
      height: 200px;
      object-fit: cover; /* 保持图片比例并填充到容器内 */
    }
    
    .circular-mask::before {
      content: "";
      display: block;
      padding-top: 100%; /* 这里保证伪元素的宽高比为1:1，从而形成圆形 */
      background-color: #D9D9D9; /* 遮罩背景颜色 */
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      border-radius: 50%; /* 将边角设置为50%，形成为圆形 */
      z-index: 1;
    }
  </style>
</head>
<body>
  <div class="circular-mask">
    <img src="your-image-source.jpg" alt="Your Image Description">
  </div>
</body>
</html>

    这段代码首先创建了一个.circular-mask类的div元素来作为图片的容器，并在其内部嵌套了图片标签。然后，我们通过CSS伪元素::before来创建一个圆形遮罩层，并将其置于图片之上。调整border-radius值为50%即可实现圆形效果。

    请将your-image-source.jpg替换为实际要使用的图片URL。这样，当网页加载时，图片会显示在一个圆形遮罩之内。

    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论 编辑记录
查看更多回答(17条)

报告相同问题？

  • 图片半透明圆形镂空遮罩
    2022-11-13 17:17
    leveretz的博客 图片半透明圆形镂空遮罩
  • cocosCreator教程:如何创建圆形遮罩(Shader)
    2026-03-09 13:43
    软件著作加急办理的博客 我这里用的是cocosCreator 3.7.2版本，不同版本可能存在差异前面有一个篇文章也是介绍在cocosCreator中创建圆形遮罩的，但是之前是使用的mask遮罩，这里介绍一种新的方法，使用Shader。这两种方法可以实现同样的效果...
  • openlayers遮罩示例
    2022-01-29 09:32
    遮罩层通常是一个具有半透明颜色的几何图形，如矩形或圆形，覆盖在地图上。可以使用OpenLayers的`Feature`和`Style`对象来创建和定制遮罩的外观。 3. **style.css** - 用于定义应用的CSS样式，包括地图容器的样式...
  • CSS3图片形状遮罩动画效果.zip
    2022-11-17 21:19
    例如，我们可以创建一个圆形遮罩，使得图片只显示为圆形： ```css img { -webkit-mask: url(circle.png) no-repeat; mask: url(circle.png) no-repeat; } ``` 在这里，`circle.png`是一个黑色和白色的PNG图像，...
  • 前端遮罩层实现_前端制作遮罩与蒙版
    2021-02-05 06:39
    陈兰香的博客 -1遮罩： 有色则显示，无色抠取，半透明则半透明蒙版： 黑色则抠除，白色显示，灰色则半透明概念上两者非常容易混淆，但完成的效果是一样的，需记住哪个是无色抠取，哪个是黑色抠除。再者还有个裁剪，只是做裁切，...
  • Vue3 实现鼠标跟随圆形遮罩与视频重叠交互效果
    2025-09-02 13:06
    一颗得道仙丹的博客 本文将介绍如何基于 Vue3 + TypeScript 实现一个「鼠标跟随圆形遮罩」效果 —— 当鼠标移动时，圆形遮罩会跟随光标，当遮罩与页面中的静态图片重叠时，重叠区域会显示对应的视频，营造出动态交互的视觉体验。
  • html实现图片的形状遮罩,CSS中图形剪切、遮罩功能-及使用说明
    2021-06-10 07:10
    逆狗的博客 例如，下面是一个用线性渐变填充的圆形遮罩： 请记住，即使没有alpha通道（即透明度），也可以通过调整 mask-mode 来 使用位图图像： 遮罩的一个重要概念是修改图像的像素，改变他们的值 – 让他们中的一些区域变成...
  • vue2 高德地图选中区域定位点及圆形遮罩实现
    2025-09-03 16:37
    甯萍的博客 本文介绍了一个基于高德地图API的Vue地图组件实现。...4）半径变化自动调整圆形大小；5）通过逆地理编码获取详细地址。该组件实现了地图选择与表单输入的联动，适用于需要地理定位功能的Web应用场景。
  • WHAT - 图形遮罩技术
    2025-10-10 11:41
    @PHARAOH的博客 在前端开发中，图形遮罩（Masking） 是一种常用的视觉技术，可以通过一张“遮罩图”来控制某个元素（通常是图片或渐变背景）的显示区域，让元素只在特定形状的区域内可见，从而实现酷炫的视觉效果或复杂的 UI 设计。...
  • vue+input file上传图片并以圆形展示代码分享（升级版增加遮罩）
    2022-04-01 14:25
    TwoBE9876的博客 } js（无变化） getImgURL (event) { // 获取上传的文件对象file let file = event.target.files[0] // 获取文件的后缀名，用以判断文件类型是否为图片 const fileType = file.name.substring(file.name....
  • 没有解决我的问题, 去提问

问题事件

  • 系统已结题 2月13日
  • 已采纳回答 2月5日
  • 修改了问题 1月31日
  • 创建了问题 1月31日