css透明度怎么设置？css中各种透明度的设置方法总结-css教程-PHP中文网

首页

web前端

css教程

css透明度怎么设置？css中各种透明度的设置方法总结

不言

Nov 01, 2018 pm 03:50 PM

本篇文章给大家介绍一下css中透明度的设置方法，下面我们就来看看具体的内容。

不透明度和透明度

根据定义，CSS中的不透明度和透明度定义了元素的可见性，无论是图像，表格还是RGBA（红绿蓝alpha）颜色值。根据它们的意思，不透明度是元素不透明度或坚固度的度量，而透明度则衡量您可以轻松地看到它下面层中存在的内容。无论如何，它们以相同的方式工作 - 100％不透明意味着元素完全可见，而100％透明意味着它完全不可见。

您可以使用CSS，而不是使用昂贵的软件来创建这些效果！通过几个简单的击键，您可以立即更改页面中元素的外观，或者在某些情况下甚至可以更改鼠标指针悬停在其上时的反应。

不透明和透明的图像

修改图像时，opacity属性接受0.0到1.0之间的值，后者作为默认值。因此，值越低，图像变得越透明。

在下面的例子中，我们使用0.2,0.5和1.0进行并排比较：

360截图20181101153555228.jpg

img {
opacity: 0.5;
filter: alpha(opacity=50); /* For IE8 and earlier */
}

注意：我们使用了filter属性，因为Internet Explorer 8及更低版本的版本尚未识别opacity属性。

透明的盒子和桌子

您可以使用opacity属性为元素添加透明度，包括背景及其所有子元素。例如，在下面的框中（使用dc6dce4a544fdca2df29d5ac0ea9906b，而不是f5d188ed2c074f8b944552db028f98a1及其子元素），所有文本也变为透明。

360截图20181101153837130.jpg

文字也会推着背景颜色的透明而透明，如果这正是你想要实现的，则无需修改任何其他内容。你可以直接使用以下代码来实现此效果：

div {
opacity: 0.3;
filter: alpha(opacity=30); /* For IE8 and earlier */
}

使用RGBA实现透明度

但是，如果您只想更改背景，而文本或其他子元素将保持不透明，则可以使用RGBA绕过它。如果您习惯使用十六进制代码，则可以了解在CSS中定义颜色的其他方法，即包括，RGB / RGBA和HSL / HSLA颜色。

RGBA代表红绿蓝alpha，alpha参数指定RGB颜色的不透明度。因此，使用RGBA颜色值，我们可以设置背景的不透明度，而文本保持黑色：

360截图20181101154343152.jpg

在上面的例子中，我们使用了RGB值171,205,239，然后alpha参数定义了它的透明度或透明度。例如：

div { background：rgba（171,205,239,0.3）/ *蓝色背景，不透明度为30％* / }

css透明背景图片中的不透明文本

使用不透明度和透明度可以做的另一个非常酷的事情是在透明框中添加文本，可能是为了抵消真正不合适或黑暗的背景图像，如下面的示例所示。

360截图20181101154502296.jpg

要创建这种简单而有效的样式，请使用dc6dce4a544fdca2df29d5ac0ea9906b元素并将其类命名为“background”和“transbox”。第一类是背景图像和边框，而第二类是单独的背景颜色和边框。最后，使用段落添加文本。

首先，我们创建一个带有背景图像和边框的dc6dce4a544fdca2df29d5ac0ea9906b元素（class =“background”）。然后我们在第一个dc6dce4a544fdca2df29d5ac0ea9906b中创建另一个dc6dce4a544fdca2df29d5ac0ea9906b（class =“transbox”）。dc6dce4a544fdca2df29d5ac0ea9906b元素具有背景颜色和边框 - div是透明的。在透明的dc6dce4a544fdca2df29d5ac0ea9906b中，我们在e388a4556c0f65e1904146cc1a846bee元素中添加了一些文本。

以下是我们使用的代码，您可以使用自己的图像和文本进行修改和测试：

<html>
<head>
<style>
div.background {
background: url(green-tile.jpg) repeat;
border: 2px solid black;
}
div.transbox {
margin: 30px;
background-color: #ffffff;
border: 1px solid black;
opacity: 0.6;
filter: alpha(opacity=60); /* For IE8 and earlier */
}
div.transbox p {
margin: 5%;
font-weight: bold;
font-family: Verdana;
font-size: 12px;
color: #000000;
}
</style>
</head>
<body>
<div>
<div>
<p>This is sample text placed in a transparent box.</p>
</div>
</div>
</body>
</html>

最后

不透明度和透明度有许多可能的用途，无论是纯粹的审美还是强调网页上的元素。它肯定是除了依靠Photoshop或其他照片编辑软件为您完成所有这些的最便宜的替代方案！

以上是css透明度怎么设置？css中各种透明度的设置方法总结的详细内容。更多信息请关注PHP中文网其他相关文章！

声明

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn