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

NoraXie 发布于2019-08-30 15:53 / 2375人阅读

摘要：在中与半透明效果相关的属性有两个和。属性的值规定透明度。以及更早的版本支持替代的属性。接下来通过场景来描述半透明效果的实现。图片出现半透明效果，如果将文字设置为白色，文字的半透明效果会很小。

在CSS中与半透明效果相关的属性有两个：opacity和rgba。
opacity属性的值规定透明度。从 0.0 （完全透明）到 1.0（完全不透明）。设置opacity元素的所有后代元素会随着一起具有透明性，一般用于调整图片或者模块的整体不透明度。IE8 以及更早的版本支持替代的 filter 属性。例如：filter:Alpha(opacity=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;
    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和层叠上下文》中分析。

GPU云服务器云服务器半透明效果半透明半透明度 html标签半透明

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/116614.html

聊聊网页中的图片

摘要：使用的场景多为页面内容的图片，较大的头图，颜色过多的图片。就是页面中的背景，并不是内容，修饰作用。 warn: 这是一篇没有一张图片的讲图片的文章 1. 图片格式通常在网页中使用的图片有三种格式，jpg，png和gif。jpg是有损压缩格式，就算你在ps里用100%质量保存，保存多次会产生质量损失，而png和gif则不会。因此如果开发者相对图片进行微处理，改动jpg不是明智的选择。p...

Meathill 2019-08-28 18:18 评论0 收藏0
聊聊网页中的图片

摘要：使用的场景多为页面内容的图片，较大的头图，颜色过多的图片。就是页面中的背景，并不是内容，修饰作用。 warn: 这是一篇没有一张图片的讲图片的文章 1. 图片格式通常在网页中使用的图片有三种格式，jpg，png和gif。jpg是有损压缩格式，就算你在ps里用100%质量保存，保存多次会产生质量损失，而png和gif则不会。因此如果开发者相对图片进行微处理，改动jpg不是明智的选择。p...

Vultr 2019-08-01 14:54 评论0 收藏0
CSS背景与边框

摘要：背景与边框半透明边框背景知识颜色在里我们可以使用和两种色彩模式，二者均可以用来在设置颜色的同时指定其它透明度。解决方案需要知道的是，在默认情况下，背景会延伸到边框所在区域的下层。 title: 背景与边框 date: 2016-10-16 tags: CSS Secrets 0x00 半透明边框背景知识 RGBA/HSLA 颜色在CSS3里我们可以使用RGBA和...

wanghui 2019-08-30 13:15 评论0 收藏0
CSS揭秘之《制作半透明边框》

摘要：默认状态下，背景会延伸到边框的区域下层可以通过属性来调整上述默认行为所带来的不便这个属性的初始值是，意味着背景会被元素的边框的外沿框裁切掉实现半透明边框代码如下通过设置通道然后具体效果见链接 1、默认状态下，背景会延伸到边框的区域下层2、可以通过 background-clip 属性来调整上述默认行为所带来的不便；这个属性的初始值是 border-box，意味着背景会被元素的 bor...

Berwin 2019-08-20 19:08 评论0 收藏0