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

html-css021

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

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

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

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

<!DOCTYPE html>

<!-- 上面的DocType是HTML5声明防止某些浏览器不识别，旧版本IE(低于或者等于IE8)无效 -->

<div class="outer">

<div class="inner">

</div></div> .outer {

background:pink

width:100%height:100%

position:relative

}

/* 为了实现透明效果我们要有个背景 */

.inner {

background:black

width:300pxheight:300px

position:absolute

border-radius:100%

behavior:url(yourbehavior.htc)

}

/* 用CSS3新特性圆角来做出圆形效果，border-radius设定为100%为完全圆角(把整个元素变成椭圆形，如果是像素则会制作出一个绝对正圆的圆角，类似圆角长方形或者香肠形)。

宽高必须相等才是正圆。

位置相对定位来保证圆的位置，本例随便做的位置。

behavior是IE低版本的一个绘图功能组件，现在网上有许多可以现成使用的behavior，例如PIE.htc，挑选一个能实现圆角效果并且最适合你的插件来安装使用 */

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

不要图片评出来的圆角矩形

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns=" http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/htmlcharset=utf-8" />

<title>纯透明圆角矩形框，无背景图片</title>

<style>

*{ margin:0pxpadding:0px}

#main{ width:200pxmargin:50px auto}

#main .middle{ width:198pxheight:20pxborder-left:1px solid #999border-right:1px solid #999margin:0px autooverflow:hiddenfont-size:12px}

.top1,.top2,.top3,.top4,.bo1,.bo2,.bo3,.bo4{ height:1pxborder-right:1px solid #999margin:0px autoborder-left:1px solid #999overflow:hidden }

.top4,.bo4{ width:196pxheight:2px}

.top3,.bo3{ width:194px}

.top2,.bo2{ width:190pxborder-width:2px}

.top1,.bo1{ width:188pxbackground:#999}

#main div{opacity:0.5filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=50)background:#999}

</style>

</head><body><div id="main">

<div class="top1"></div>

<div class="top2"></div>

<div class="top3"></div>

<div class="top4"></div>

<div class="middle">

所有圆形边角都是半透明

</div>

<div class="bo4"></div>

<div class="bo3"></div>

<div class="bo2"></div>

<div class="bo1"></div>

</div></body>

</html>

可以参考以下我的这个代码：

XXX:{

border: 5px solid rgba(XXX, XXX, XXX, 0.5)

}

其中第一个XXX是你选择的需要半透明的元素

接下来的XXX是你想要半透明的颜色

设置透明度为0.5就可以做到半透明了。