本文目录
- CSS 图片半透明,文字不透明显示
- CSS中为什么我设置了背景为半透明,连字体都透明了
- 请问浏览器“检查”中CSS规则显示为半透明意味着什么，这个规则没有起作用，为什么会导致这种情况呢
- CSS如何定义DIV背景半透明颜色
- 如何用css实现半透明遮罩层效果
- 怎么用CSS让网页特定图片半透明
- 如何在css中设置半透明边框
CSS 图片半透明,文字不透明显示
《html》
《head》《title》图片，透明层，文字《/title》
《style》
#box1{
float:left;/*浮动定位和相对定位都可以，我这里用的是浮动定位。*/
width:20%;
height:15em;
margin-left:3%;
margin-top:3%;
}
#box2{
float:left;/*浮动定位和相对定位都可以，我这里用的是浮动定位。*/
width:100%;
height:100%;
border:1px solid black;/*给图片做个边框*/
overflow:hidden;/*不准溢出来，做动画效果的时候可能会溢出来，溢出来的部分隐藏起来。*/
}
#picimg{
float:left;/*浮动定位和相对定位都可以，我这里用的是浮动定位。*/
width:100%;
height:100%;
}
#touming{
position:relative;/*这个透明层尽量用相对定位，这样不会跑来跑去，原因目前还不怎么清楚，反正相对ok*/
clear:both;/*清除浮动效果，避免到时候到处乱跑，比如做了过渡动画的时候。*/
width:100%;
height:1.5em;
top:-13.5em;
background:gray;
filter:alpha(Opacity=30);/*设置透明效果30*/
-moz-opacity:0.3;/*设置透明效果0.3*/
opacity: 0.3;/*设置透明效果0.3*/
left:0;/*距离box1距离是0，实际上距离box2的距离也是0*/
}
#words{
position:relative;/*这里用相对定位*/
clear:both;/*清除浮动，这个很有必要，不清除浮动会到处乱跑的。*/
width:100%;/*相对于box1的宽度，实际上也等于box2的宽度*/
height:2em;
color:red;/*设置文字颜色为红色，你自己喜欢什么颜色就弄什么颜色，我比较喜欢红色。*/
top:-15em;/设置成负的，把文字提到box2上面去/
left:0;/*相对于box1,左边距离设置成0*/
text-align:center;
}
《/style》
《/head》
《body》
《div id=“box1“》
《div id=“box2“》
《img id=“picimg“ src=“我还会用三个div画一个心形，好看得很哟！！@
CSS中为什么我设置了背景为半透明,连字体都透明了
你用的CSS滤镜，他会把标签内的所有元素都半透明。因为CSS滤镜是IE独有的，所以火狐不支持。你可以这样写.header{filter:alpha(opacity=50);opacity:0.5;}至于怎么样让.header标签内的元素不透明，我想还是写一个跟.header平级的标签，再用绝对定位作吧！
请问浏览器“检查”中CSS规则显示为半透明意味着什么，这个规则没有起作用，为什么会导致这种情况呢
这是当前元素继承了某个元素的CSS样式，但某些属性没有继承，就显示为半透明。
你这里是继承了p元素的样式，但是“margin-top”没有被继承或不能继承。
CSS如何定义DIV背景半透明颜色
“长城郭靖”回答的是错的，他答的是让整个元素半透明
只让背景半透明只有一个办法，就是用rgba颜色，代码如下
background: rgba(0, 0, 0, 0.5)
解释：这是黑色半透明的代码
前三个值表示颜色的red,green,blue值
最后一个表示alpha值，就是透明度值，不透明为1
（支持IE8+以及所有现代浏览器）
还是不懂的话，可以参考 百度百科 “rgba”词条 和 “CSS 颜色值”词条
如何用css实现半透明遮罩层效果
1 、半透明效果可以使用 css3 中的 opacity 属性，在低版本的IE浏览器中使用IE的alpha 滤镜。代码: .opacity{ opacity:0.3; filter: alpha(opacity=30); background-color:#000; } 2 、要覆盖整个可视区域通常的做法是: html,body{ height:100%} .mask{height:100%;width:100%;} 但是这样做当内容超过一屏时只有IE6下显示的效果是我们所期望的，在其他浏览器中首屏以下的没能被遮盖住，为了兼容其他浏览器我们可以使用position:fixed; 来解决这个问题 完整的代码: 《div class=“mask opacity“》《/div》 html,body{ height:100%; margin:0; padding:0} .mask{height:100%; width:100%; position:fixed; _position:absolute; top:0; z-index:1000; } .opacity{ opacity:0.3; filter: alpha(opacity=30); background-color:#000; }
给你一个例子：
《!DOCTYPE html》 《html》 《head》 《meta charset=“gb2312“ /》 《title》背景半透明覆盖整个可视区域《/title》 《style》 html,body{ height:100%; margin:0; padding:0; font-size:14px;} p{ line-height:18px;} .mask{height:100%; width:100%; position:fixed; _position:absolute; top:0; z-index:1000; } .opacity{ opacity:0.3; filter: alpha(opacity=30); background-color:#000; } .content{height:600px; width:800px; overflow:auto; border:2px solid #ccc; background-color:#fff; position:absolute; top:50%; left:50%; margin:-300px auto auto -400px; z-index:1001; word-wrap: break-word; padding:3px;} .ph{ height:1000px;} 《/style》 《/head》 《body》 《p class=“ph“》place holder height:1000px;《/p》 《div class=“mask opacity“》《/div》 《div class=“content“》 《h1》背景半透明覆盖整个可视区域《/h1》 《p》 这个效果效果在工作中经常会遇到，这篇文章主要介绍了当内容超过一屏时如何做到多浏览器的兼容性。 下面我们通过一个简单的例子看看如何实现，高手请绕道。 《/p》 《p》html代码很简单 《 d i v class=“mask opacity“》《 / d i v 》 《/p》 《p》 1 、半透明效果可以使用 css3 中的 opacity 属性，在低版本的IE浏览器中使用IE的alpha 滤镜。代码: 《code》.opacity{ opacity:0.3; filter: alpha(opacity=30); background-color:#000; }《/code》 《/p》 《p》 2 、要覆盖整个可视区域通常的做法是: 《br/》 《code》 html,body{ height:100%} 《/code》 《br/》 《code》.mask{height:100%;width:100%;}《/code》 《br/》 但是这样做当内容超过一屏时只有IE6下显示的效果是我们所期望的，在其他浏览器中首屏以下的没能被遮盖住，为了兼容其他浏览器我们可以使用《code》position:fixed; 《/code》来解决这个问题 《/p》 《p》 《strong》完整的代码《/strong》: 《pre》 html,body{ height:100%; margin:0; padding:0} .mask{height:100%; width:100%; position:fixed; _position:absolute; top:0; z-index:1000; } .opacity{ opacity:0.3; filter: alpha(opacity=30); background-color:#000; } 《/pre》 《/p》 《p》 《strong》参考资料：《/strong》《a href=“http://zhidao.baidu.com“》背景半透明最佳实践《/a》《a href=“http://baidu.com“》垂直居中的几种实现方法《/a》《a href=“http://tieba.baidu.com“》DIV高度100%《/a》《/p》 《/div》 《/body》 《/html》
怎么用CSS让网页特定图片半透明
实现半透明只能在IE或者以IE为内核的浏览器下才有效. �0�2Example�0�2Source�0�2Code�0�2 Alpha(Opacity=?,�0�2FinishOpacity=?,�0�2Style=?,�0�2StartX=?,�0�2StartY=?,�0�2FinishX=?,�0�2FinishY=?) （1）“Opacity”代表透明度水准，范围是0---100，其实就是百分比的意思，如果你想变为全透明，那么就用0代替Opacity后面的问号吧。 （2）“FinishOpacity”就是用来指定结束时的透明度，范围跟Opacity一样（FinishOpacity为可选参数。 （3）“Style”是指定透明区域的形状特征，0代表统一形状，1代表线形，2代表放射形，3代表长方形。 （4）“startX”与”startY”就是代表渐变效果开始的X与Y坐标，（坐标应该知道是什么吧）一般我们设置为StartX=0,�0�2StartY=0（这样就是表示的透明效果是从图片的左上角开始的。） （5）“FinishX”与“FinishY”当然，这个就是代表渐变效果结束时的横纵坐标了，这里很关键，填什么数值那就要看你的图片的高与宽了，假设我们的图片高与宽分别是90、200像素，那么就可以写成FinishX=200，�0�2FinishY=90。（如果你只想要一半的面积是透明，那么可以设置成FinishX=100，�0�2FinishY=50）
如何在css中设置半透明边框
可以参考以下我的这个代码：XXX:{border:5pxsolidrgba(XXX,XXX,XXX,0.5)}其中第一个XXX是你选择的需要半透明的元素接下来的XXX是你想要半透明的颜色设置透明度为0.5就可以做到半透明了。