当前位置：首页 > Web前端 > CSS

CSS半透明效果的属性和场景

时间：2023-03-30 23:14:12 CSS

CSS中与半透明效果相关的属性有两个：opacity和rgba。opacity属性的值指定透明度。从0.0（完全透明）到1.0（完全不透明）。opacity元素的所有后代元素都会一起具有透明度，一般用于调整图片或模块的整体不透明度。IE8及更早版本支持替代过滤器属性。例如：滤镜：Alpha（不透明度=50）。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;宽度：300px；高度：200px；边距：20px；颜色：RGB（200,140,50）；背景图像：url（“finger.jpg”）；文本对齐：居中；游标：指针；}.bottom{位置：绝对；底部：0；宽度：100%；高度：30px；高度：30px；背景色：rgba(200,200,200,0.4)；//设置颜色的半透明效果}3、图片下方有文字，将鼠标悬停在图片上，图片会变得模糊，但文字不受影响。外面有一个盒子，里面有两个盒子，图文分别放，图底边负，文字叠在图上。图片和文字不在同一个盒子里，所以改变图片的不透明度不会影响文字。

小指

.image1{位置：相对的;宽度：300px；高度：200px；底部边距：-20px；颜色：RGB（200,140,??50）；背景图像：url（“finger.jpg”）；文本对齐：居中；cursor:pointer;}.image1:hover{opacity:0.6;}.text1{display:block;位置：绝对；底部：0；宽度：300px；高度：20px；红色;文本对齐：居中；光标：指针；}4。当鼠标悬停在图片上时，图片上会出现纵横居中的文字，文字是通过伪元素添加的。图片看起来是半透明的。如果文字设置为白色，文字的半透明效果会很小。它的好处是只需要写一个div。.image2{position:relative;宽度：300px；高度：200px；边距：20px；文本对齐：居中；背景图像：url（“finger.jpg”）；cursor:pointer;}.image2:hover{opacity:0.8;}.image2:hover:after{content:"LittleFinger";显示：内联块；字体大小：25px；高度：200px；行高:200px;color:#fff;}5.电商网站（如天猫）和新闻网站（如好奇研究院），有需要出现半透明效果的地方。大多采用以下两种结构：">

这是一些文本

.href{display:inline-block;宽度：250px；高度：400px；边距：20px；文字修饰：无；color:#000;}使用a标签包裹图像标签和文本框。此时a标签是块级元素，a标签的宽高都大于图片的宽高。当鼠标悬停在a标签上时，a标签中的图像将是半透明的。我还没有找到实现这种效果的css。我猜想可能是用JS实现的。如果作者的猜测有误，请指正。或者这样的结构：:absolute;visibility:hidden;background-color:rgba(0,0,0,0.5)">

Thisissometext

在parentbox里放两个一个absolutely定位的子框，一个是图片，一个是文字，文字的框是一个a标签，作为块元素，背景色设置为半透明色。我猜是父框响应了鼠标悬停事件，然后修改a标签的visibility属性。父框的不透明度会影响子框，不透明度主要用于图片，而rgba用于颜色。而opacity属性还有一个比较有意思的地方，那就是创建级联上下文，我会在下一篇文章《细说opacity和层叠上下文》进行分析。

上一篇：移动端vwpxrem之间的转换

下一篇：我的第一个网页

CSS半透明效果的属性和场景相关文章

最新推荐

猜你喜欢