Skip to main content

CSS转换不透明度

CSS中的不透明度是一个属性,用于指定控制内容或图像等元素的透明度。使用此属性,我们可以将任何图像设置为完全不透明(可见)、完全透明(隐藏)或半透明(部分可见)。它需要一个介于0和1之间的数值。其中0定义完全透明,1定义完全可见。不透明度值介于0和1之间,例如0.2、0.4、0.6等,通过逐渐增加十进制值,将图像从透明更改为不透明。

CSS转换不透明度

语法

opacity : <numeric value>

数值必须介于0和1之间,才能使图像半透明。如果我们提供1,图像将是不透明的,如果数值为0,图像将变得完全透明。

示例1:在本例中,当将鼠标移动到元素上时,我们将使用“不透明度”属性使元素透明。

主要的html

<!DOCTYPE html>
<html lang="en">
<head>
<title>Simple example to display the Opacity</title>
</head>
<style>
.get {
background: red;
width: 300px;
height: 250px;
border: none;
color: white;
padding: 16px 32px;
text-align: center;
font-size: 16px;
margin: 4px 2px;
}
.get:hover { // hover is used to show the impact on element when the mouse on the element.
opacity: 0.5; // set the opacity value to 0.5
}
</style>
<body>
<div class="get"></div> // use of class in CSS.
</body>
</html>

输出

CSS转换不透明度

将鼠标悬停在红色框上以显示透明或不透明效果。

CSS转换不透明度

CSS中的过渡不透明度

在CSS中,过渡不透明度是用于将不透明度状态从一个级别平滑更改为另一个状态的属性。这意味着“过渡不透明度”会在定义的持续时间内将不透明元素的状态更改为透明。过渡有四个属性:过渡属性、过渡持续时间、过渡计时函数和过渡延迟,用于对图像执行不透明度效果。过渡持续时间是渐变或突变的重要属性,这些渐变或突变反映了在定义的持续时间(毫秒或秒)内元素上的不透明度效果。

过渡的简写特性如下:

transition: [transition - property] [transition -duration] [transition -timing -function] [transition - delay];

在CSS中定义转换不透明度的语法

{
transition: opacity 5s;
opacity: 1; // set opacity property to 1, completely visible
}

Or
{
transition: opacity 0.3s linear 2s; // effect on 0.3 millisecond
}

过渡性质

以下是用于控制过渡效果的过渡属性。

价值描述
过渡-财产它用于定义显示图像过渡效果的CSS属性的名称。
过渡-持续时间它用于定义以秒或毫秒为单位的时间段,以显示过渡效果。
过渡时间函数它用于定义图像上的速度曲线,以显示过渡效果。
过渡-延迟指定是否在元素或图像上启动过渡效果。

注意:在设置图像或内容的转换属性时,必须定义转换持续时间属性;否则,持续时间将变为0,并且不会显示任何效果。

CSS中转换不透明度的需要

不透明度是一个简单的CSS属性,用于通过将不透明度的范围设置为0到1来控制图像的透明度。它反映元素上的静态或突然变化,以显示不透明度效果。例如,如果我们想将图像显示为透明,我们必须将不透明度值从0设置为1。之后,它会立即显示不透明度效果,而不是花费一些时间。因此,我们在CSS中使用一个过渡不透明度,它在定义的时间段内控制元素的透明度。使用过渡不透明度中的过渡时间函数,我们可以确定指定图像上快速不透明度效果的元素的速度曲线。通过这种方式,我们使用过渡不透明度效果来反映指定时间段内的变化,而不是立即发生。

示例2:在本例中,我们将使用transition opacity属性,该属性反映指定持续时间内的不透明度效果,而不是立即。

文件1。html

<!DOCTYPE html>  
<html>
<head>
<title>
CSS transition opacity Property
</title>
<style>
.pr{
width: 400px;
height: 300px;
background: lightgreen;
position: relative;
}

.cr{
width: 270px;
height: 200px;
position: absolute;
/* top: 30px; */
left: 30px;
color: white;
margin: 40px auto;
margin-bottom: 30px;
font-family: Arial, Helvetica, sans-serif;
background: red;
font-weight: Bold;
font-size: 36px;
opacity: 0;
}


.cr:hover {
opacity: 1;
transition: opacity 2s ease-out; /* It slowly shows the element as we place the mouse on the box and when the time reaches 2 seconds, it is fully visible. */
-webkit-transition: opacity 2s ease-out;
-moz-transition: opacity 2s ease-in-out;
}
</style>
</head>
<body>
<h1> Use of Transition Opacity Property in CSS </h1>
<div class="pr">
<div class="cr">
Hello friends, Welcome to JavaTpoint
</div>
</div>
<p> Move the cursor (mouse) over the green square box to see the transition opacity effect. </p>
</body>
</html>

输出

CSS转换不透明度

将光标移动到绿色框上以显示过渡不透明度效果,如下所示。

CSS转换不透明度

一个元素完全可见需要2秒,如下所示。

CSS转换不透明度

在上面的示例中,加载页面时,只显示绿色框。但当我们将鼠标移到盒子上时,它会随着我们设置的持续时间逐渐将盒子显示为红色。

示例3:在本例中,我们使用transition opacity属性来检查链接,该属性显示指定时间段内的不透明度效果,而不是立即检查链接。

褪色html

<html>
<head>
<style >

.c2 { opacity : 0.3;
transition:opacity 1s;
padding:40px;
position : absolute;
margin-top: 30px;
background-color:yellow;
width: 200px;
height: 200px;
font-size: 25px;
font-style : Bold;
color: green;
}
.c2:hover { opacity : 1}


</style>
</head>
<body>
<h1> Using transition opacity property in CSS </h1>

<div class="c2">
JavaTpoint: Best Tutorial Site
<div > Check link is working <br >
<p style="font-size:14px";> <a target="new" href="https://www.javatpoint.com/">
https://www.javatpoint.com/
</a>
</p>
</div>
</div>

</body>
</html>

输出

CSS转换不透明度