CSS的opacity属性该怎么使用-tutorial css-php.cn

CSS的opacity属性该怎么使用

不言

Lepaskan： 2018-12-12 09:13:57

asal

6127 orang telah melayarinya

opacity属性是用来设置元素的不透明度的，它建立在每个元素上是100％不透明的状态，但是它可以通过改变不透明度的值来显示元素它们的透明度，接下来的这篇文章我们就来详细介绍CSS中opacity属性的用法。

opacity

opacity属性的使用方法

描述如下

opacity:值;

Salin selepas log masuk

在值部分中，可以使用0.0到1.0的数值指定不透明度。数字越大，不透明度越高，显示的越清晰。相反，数字越小，不透明度越低，显示的越模糊。此外，如果为值输入inherit，则继承父元素的值。

即使将其设置在0.0到1.0的范围之外，也可以在此范围内应用（例如：-1→ 0/2 →1）将不透明度设置为0使其完全透明，并从屏幕上消失。
当不透明度设置为1时，它变得完全不透明。（初始值）

接下来让我们来看opacity属性的具体示例

当值是小数点时

代码如下

HTML代码

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <link rel="stylesheet" href="sample.css" type="text/css">
  </head>
  <body>
    <div>
      <p>当值是小数的情况下</p>
    </div>
  </body>
</html>

Salin selepas log masuk

CSS代码

div {background-color:#b0e0e6; }
p {opacity:0.5; }

Salin selepas log masuk

在这里，我们在

区域的

段落中输入文本，背景颜色为#b0e0e6，并将

的不透明度值设置为0.5。

在浏览器上显示效果如下：

段落的字符部分的不透明度已经改变，它显示出略微透明。此外，由于

区域中未设置不透明度，因此背景颜色的不透明度未更改。

opacity

当值是0或1时

代码如下

HTML代码

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
  <link rel="stylesheet" href="sample.css" type="text/css">
  </head>
  <body>
    <div>
      <p class="text1">当属性值是0的时候</p>
    </div>
    <div>
      <p class="text2">当属性值是1的时候</p>
    </div>
  </body>
</html>

Salin selepas log masuk

CSS代码

div {background-color:#b0e0e6; }
p.text1 {opacity:0; }
p.text2 {opacity:1; }

Salin selepas log masuk

在浏览器上显示效果如下

第一行的文字是完全透明的，因此不会在页面上显示，第二行上的文字显示为原样，因为它完全不透明。
由于1是初始值，因此如果未在父元素中指定不透明度，则其不透明度不变。

2345截图20181211131521.png

下面我们就来看看使用opacity属性对图像不透明度的设置

我们来直接看代码

HTML代码

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
  <link rel="stylesheet" href="sample.css" type="text/css">
  </head>
  <body>
    <div class="cover">
      <h2 class="cover-title">
        <span class="inline">
          <i class="fa fa-code fa-l"></i>
          php中文网</span>
      </h2>
      <p class="cover-caption">opacity属性的使用方法</p>
    </div>
  </body>
</html>

Salin selepas log masuk

CSS代码

.cover {
  background-image:url("img/tupian.jpg");
  width: 100%;
  position: relative;
  overflow: hidden;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}

Salin selepas log masuk

在浏览器上显示效果如下

2345截图20181211133238.png

在不透明属性值为1的情况下，图像的显示并不会改变，这里就不多说了。

当不透明属性值为0.5时，CSS代码如下

.cover {
  background-image:url("img/tupian.jpg");
  width: 100%;
  position: relative;
  overflow: hidden;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  opacity: 0.5;
}

Salin selepas log masuk

效果如下

opacity

当不透明属性值为0.2时，将会变得更加模糊，效果如下

2345截图20181211133956.png

Atas ialah kandungan terperinci CSS的opacity属性该怎么使用. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Label berkaitan：

opacity属性

sumber：php.cn

Artikel sebelumnya：CSS中float属性怎么使用 Artikel seterusnya：CSS中常见自适应布局有哪些

Kenyataan Laman Web ini

Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn

Artikel terbaru oleh pengarang