如何用CSS指定透明度css半透明【如何正确使用opacity和rgba】 |
您所在的位置:网站首页 › excel中如何设置图片透明度和透明度 › 如何用CSS指定透明度css半透明【如何正确使用opacity和rgba】 |
“我想指定图像和背景的透明度 !” 使用 CSS opacity 和 rgba,您可以轻松确定图像和背景的透明度。 即便如此,事实是许多人发现很难区分两者,因为它往往很模糊。 在这篇文章中,我们将为这样的人解释一下opacity和rgba的区别! 请读完本文并掌握指定透明度的使用! 不透明度和rgba有什么区别?opacity和rgba之间最大的区别是“属性和属性值的区别” 。 CSS就是指定“在哪里、什么、如何”改变。 决定“什么”的属性是不透明度。 rgba指的是决定“如何”的属性值。 不透明度的基本概念不透明度是 CSS 属性。 所以你可以决定整个选择器的透明度。 例如,当使用不透明度时,代码如下所示: html opacity和rgba的区别使用 opacity的用法 opacity的用法css .opacity-sample { background-color: #337079; width: 200px; text-align: center; } #opacity02 { opacity: 0.5; }不透明度可以指定在 0 到 1 之间,数字越小,透明度越高。 当你实际使用不透明度时,你可以看到整个选择器=图像和文本都是高度透明的。 rgba的基本思想rgba 指的是 CSS 属性值。 因此,它具有指定“背景”和“颜色”等属性值的作用。 rgba 是一种称为 RGB 颜色模型的颜色表达方法,其中添加了代表颜色透明度的 alpha,通过混合红/绿/蓝来再现颜色。 例如,十六进制的颜色“#e55550”在rgb中表示为“229,85,80” 。 opacity指定整个选择器,而rgba可以分别改变背景颜色和文本颜色。 例如,当使用rgba时,代码如下所示。 html opacity和rgba的区别使用 rgba的用法 rgba的用法css .rgba-sample { background-color: #337079; width: 200px; text-align: center; } #rgba02 { background:rgba(51,112,121,0.4); }alpha,表示rgba的透明度,可以指定在0到1之间,数字越小,透明度越高。 从图中可以看到,这次指定为“背景”,因此在不改变文本颜色的情况下,背景颜色几乎是透明的。 比较不透明度和 rgba现在您知道每个名称是什么,让我们比较一下两者之间的差异。 这次,我们将使用 CSS 更改此 html 的装饰。 html opacity和rgba的区别使用 透明区分 透明区分 透明区分 透明区分 透明区分 透明区分另一方面,opacity用于使整体透明,rgba用于使背景颜色透明,rgba用于使字符透明。 了解如何使用不透明度和rgba!让我们看看如何使用 opacity 和 rgba 实际指定透明度。 这两种方法需要根据要透明的对象正确使用。使用opacity 实现整体透明度,例如图像,使用rgba实现文本和可以着色的元素。 opacity 使整个对象透明不透明度可以使整个对象(例如图像)变得透明。 您还可以通过指定图像的不透明度来使文本突出。 不透明度可以用1到0之间的数字表示,其中1表示不变且不透明。 0是完全透明的,什么也看不见。 透明度值可以用小数值设置。 图像的不透明度通过使图像透明,您可以使文本更易于阅读,并创建一个具有深度的网站,抑制压力感。 CSS image { opacity: 0.5; }在上面的代码中,不透明度设置为0.5 。 将要使其透明的元素应用到选择器并设置不透明度的值。 这里我们使用 image,一个指示图像的选择器,作为我们想要使其透明的元素。 通过将其用于多个图像,您可以创建各种表达方式,例如重叠的透明图像。 此外,不透明度还可以用于盒子元素,扩大了设计范围。 悬停时怎么变透明 接下来,我将向您展示如何在鼠标悬停在元素上时使元素透明。可以在{ 前面加上:hover 来表示鼠标悬停在其上时的状态。 CSS .image:hover { opacity: 0.5; }这里,选择器设置为 image ,表示图像,并将opacity的值设置为0.5 ,表示透明度。 这允许您在鼠标悬停在元素上时使元素透明,从而轻松创建移动站点。 RGBA着色rgba是一个使对象着色为透明的标签。 可以着色的对象包括文本、文本背景和边框。 例如,通过使用rgba,您可以仅使字符的背景透明,而使字符保持原样。稍后将解释该方法。 rgba用四个数字表示目标颜色和透明度。 r代表红色, g代表绿色, b代表蓝色,a代表alpha。_ 表示透明度的值与 opacity 一样为0 到 1,0表示透明,1 表示不透明。 对于字母您还可以使文本透明以使背景图像突出。 CSS color: rgba (0,0,0,0.5);使用此代码将应用半透明的黑色,因为透明度值为 0.5 背景通过使用 rgba 使背景透明,您可以仅使背景透明,同时保持字符不变。 CSS background-color: rgba (148,255,226,0.5);在CSS中为background-color选择背景颜色,并为rgba选择值。 该代码代表浅黄绿色,透明度为0.5。 CSS透明化时的注意点即使用 CSS 指定透明度,也可能不会反映出来。 在这种情况下,请检查您的浏览器是否兼容。 以下浏览器不支持透明度。 支持透明度的浏览器火狐浏览器3.0或以上 任何版本的 Google Chrome Safari 3.0 或更高版本 Opera 10.0 或更高版本 Internet Explorer 9.0 或更高版本 获取rgba值的简单方法我认为在 CSS 中确定颜色时经常使用十六进制数字。 在指定由 rgba 中的此类十六进制数字表示的颜色时,请充分利用转换位点。 结语您可以使用opacity使整个选择器透明,使用rgba使颜色可变部分透明。 确保您知道要使哪一部分透明,并能够正确使用这两个部分。 我相信它将极大地扩展网页设计的范围! 本文来源:词雅网 本文地址:https://www.ciyawang.com/css-specifying-transparency.html 本文使用「 署名-非商业性使用-相同方式共享 4.0 国际 (CC BY-NC-SA 4.0) 」许可协议授权,转载或使用请署名并注明出处。 |
今日新闻 |
推荐新闻 |
CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3 |