网站项目需要什么,wordpress google authenticator,内江移动网站建设,飞鱼ip代理在CSS中与半透明效果相关的属性有两个#xff1a;opacity和rgba。opacity属性的值规定透明度。从 0.0 (完全透明)到 1.0(完全不透明)。设置opacity元素的所有后代元素会随着一起具有透明性#xff0c;一般用于调整图片或者模块的整体不透明度。IE8 以及更早的版本支持替代的 …在CSS中与半透明效果相关的属性有两个opacity和rgba。opacity属性的值规定透明度。从 0.0 (完全透明)到 1.0(完全不透明)。设置opacity元素的所有后代元素会随着一起具有透明性一般用于调整图片或者模块的整体不透明度。IE8 以及更早的版本支持替代的 filter 属性。例如filter:Alpha(opacity50)。rgba用于设置颜色的透明度参数是rgba(red, green, blue, alpha) alpha的取值从 0(完全透明) 到 1(完全不透明)如rgba(255,255,255,0.8)。接下来通过场景来描述半透明效果的实现。1.鼠标悬浮在图片上图片变半透明。做法是给图片添加一个伪类修改opacity.image:hover{opacity:0.5;}2.图片下部分是半透明的盒子盒子内有描述性的文字。小指头.rgba{position:relative;width: 300px;height: 200px;margin: 20px;color:rgb(200,140,50);background-image: url(finger.jpg);text-align: center;cursor:pointer;}.bottom{position:absolute;bottom:0;width:100%;height:30px;line-height:30px;background-color: rgba(200,200,200,0.4); //设置颜色的半透明效果}3.图片下部有文字鼠标悬浮在图片上图片变模糊文字不受影响。外面一个盒子里面有两个盒子分别放图片和文字图片的下外边距为负值文字就盖在图片上。图片和文字不在同一个盒子内所以改变图片的opacity不会影响文字。小指头.image1{position:relative;width: 300px;height: 200px;margin-bottom: -20px;color:rgb(200,140,50);background-image: url(finger.jpg);text-align: center;cursor:pointer;}.image1:hover{opacity:0.6;}.text1{display:block;position:absolute;bottom:0;width:300px;height: 20px;color:red;text-align: center;cursor:pointer;}4.鼠标悬浮在图片上图片上出现垂直水平居中的文字文字是通过伪元素添加的。图片出现半透明效果如果将文字设置为白色文字的半透明效果会很小。它的好处就是只需要写一个div。.image2{position:relative;width: 300px;height: 200px;margin:20px;text-align: center;background-image: url(finger.jpg);cursor:pointer;}.image2:hover{opacity:0.8;}.image2:hover:after{content:小指头;display:inline-block;font-size:25px;height:200px;line-height:200px;color:#fff;}5.电商网站上(如天猫)和新闻网站上(如好奇心研究所)上有需要出现半透明效果的地方。大多数是采用如下两种结构 这是一些文字.href{display:inline-block;width:250px;height:400px;margin:20px;text-decoration: none;color:#000;}用a标签包裹着图片标签和存放文字的盒子此时的a标签表现为块级元素a标签的宽度和高度均大于图片的宽度和高度。当鼠标悬浮到a标签上a标签内的图片会加上半透明效果笔者并未找到实现这样效果的css猜想可能是由JS实现若笔者猜想有误还请观者指正。或者是这样的结构 这是一些文字在父盒子里面放两个绝对定位的子盒子一个放图片一个放文字放文字的盒子是个表现为块状元素的a标签将背景色设置为了半透明颜色笔者猜想是父盒子响应了鼠标悬浮事件然后修改a标签的visibility属性。一个父盒子的opacity会影响子盒子opacity也大多是用于图片上而rgba是用于颜色上。而opacity这个属性还具有更有意思的地方那就是创建层叠上下文这个笔者会在下篇文章《细说opacity和层叠上下文》中分析。
