css怎么实现图片中一部分圆形不透明啊？？？急求！！！

Posted 2023-03-19

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了css怎么实现图片中一部分圆形不透明啊？？？急求！！！相关的知识，希望对你有一定的参考价值。

围观一堆坑货。人家说的是CSS实现。

CSS3以下的是几乎无法实现的(可以利用.HTC这种古董东西)

实现代码(简化过了，只包含关键代码，不可直接使用)：

<!DOCTYPE html>

<div class="outer">
<div class="inner">
</div></div>

.outer
background:pink;
width:100%;height:100%;
position:relative;

/* 为了实现透明效果我们要有个背景 */
.inner
background:black;
width:300px;height:300px;
position:absolute;
border-radius:100%;
behavior:url(yourbehavior.htc);

/* 用CSS3新特性圆角来做出圆形效果，border-radius设定为100%为完全圆角(把整个元素变成椭圆形，如果是像素则会制作出一个绝对正圆的圆角，类似圆角长方形或者香肠形)。
宽高必须相等才是正圆。
位置相对定位来保证圆的位置，本例随便做的位置。
behavior是IE低版本的一个绘图功能组件，现在网上有许多可以现成使用的behavior，例如PIE.htc，挑选一个能实现圆角效果并且最适合你的插件来安装使用 */

当然，PNG实现是最简单的，也是最不负责的

参考技术A 其实是做两层
就是产品内容放在一个层里面置于下方
再在上边做另外一个层放置圆形的图片（这类图片一般做成png格式，可透明）；
通过css设置，调整好位置以及层级，即可实现；参考技术B 你好，半透明，用png图片就可以的。
你把这个圆形做成半透明的png图片，背景用这个图片就可以的。参考技术C 放个黑色图片不就可以了追问

不是的他这个是就中间的圆形是黑色的，周围都是透明的

以上是关于css怎么实现图片中一部分圆形不透明啊？？？急求！！！的主要内容，如果未能解决你的问题，请参考以下文章