DigitalOcean 为您旅程的每个阶段提供云产品。 立即开始使用 $200 免费赠送额度!
在 CSS 中,opacity
属性指定元素的透明度。
基本用法
div {
opacity: 0.5;
}
不透明度的默认初始值为 1(100% 不透明)。 不透明度不会继承,但由于父级具有不透明度,因此会应用于其中的所有内容。 您无法使子元素比父元素更不透明,除非使用一些 技巧。 值是 0 到 1 之间的数字,表示通道(“alpha”通道)的不透明度。 当元素的值为 0 时,元素完全不可见;值为 1 表示完全不透明(实心)。
Check out this Pen!
IE 兼容性
如果您希望 不透明度在所有版本的 IE 中都能正常工作,则顺序应如下所示
.opaque {
/* Theoretically for IE 8 & 9 (more valid) */
/* ...but not required as filter works too */
/* should come BEFORE filter */
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)"; // IE8
/* This works in IE 8 & 9 too */
/* ... but also 5, 6, 7 */
filter: alpha(opacity=50); // IE 5-7
/* Modern Browsers */
opacity: 0.5;
}
如果您不使用此顺序,IE8-as-IE7 不会应用不透明度,尽管 IE8 和纯 IE7 会应用不透明度。
关于堆叠上下文的说明
如果具有不透明度且值小于 1 的元素被定位,则 z-index
属性将按 CSS2.1 中所述应用,但 auto
值将被视为 0,因为始终会创建一个新的堆叠上下文。
不透明度可以用作 visibility
属性的替代方案:visibility: hidden;
与 opacity: 0;
相同。
相关属性
其他资源
浏览器支持
Chrome | Safari | Firefox | Opera | IE | Android | iOS |
---|---|---|---|---|---|---|
24+ | 5.1+ | 19+ | 12.1+ | 9+ | 2.1+ | 3.2+ |
如何创建带有 10 像素透明边框的盒子?
你能帮我一下吗?
我在寻找解决方案。
如果可能,请发送演示代码或完整示例。
提前感谢
您可以使用 rgba() 作为边框颜色
border: 10px solid rgba(255, 0, 0, 0.4);
您可以使用 padding
CSS
.box {
padding:10px;
}
HTML
有人注意到这种新方法吗?如果您这样定义背景颜色:background-color: #000000b3; 它会添加不透明度。这对我来说似乎很新,我整个上午都在尝试寻找相关文档。如果有人有更多信息,请告诉我(我只在 Firefox 中尝试过,不知道它是否在其他浏览器中有效)
嗨 Chris,您在这个页面的第一个代码块中混合了 CSS 和 JS 样式注释。
// foo
与/* foo */
– 这可能会导致任何人直接将您的示例复制粘贴到他们的工作中出现问题。我刚意识到您可能在使用 Sass 进行内联
// foo
注释。即使如此,为了避免不使用预处理器的用户在普通 CSS 中使用无效注释,最好澄清一下。我只想降低盒子背景的不透明度,而盒子里文字的不透明度不改变!请帮我一下...
如果我拼错了,请原谅我!我英语不太好!:(
使用 RGB 而不是 HEX。具有 50% 不透明度的白色背景为
background: rgba(255, 255, 255, 0.5);
Hassan,听起来你是在问如何在盒子上有不透明度,同时在盒子内部显示没有不透明度的文字。
opacity 属性会影响其内部的所有内容。因此,我更喜欢使用以下技术:
1)将需要不透明度的盒子包装在一个容器中,并为其设置 position:relative
2)为盒子设置其 opacity 属性(当然)
3)将文字放在一个独立的容器中,作为不透明盒子的相邻兄弟节点,设置 position:absolute,设置 top 和 left 属性,以设置其位置
Gilbrizzle 的信息很好,因为它与本文的主题“不透明度”属性相关,但 Hassan 所问的是一个更简单的解决方案:不要使用“不透明度”,而是使用 RGB +“alpha”。
“不透明度”属性将应用于定义它的选择器的所有属性。
然而,RGBA 只应用于它应用到的特定属性,并将选择器的其他属性保留原样。
例如
这样做会使灰色背景具有 40% 的透明度,但前面的文字仍然是黑色。
有理由使用两种解决方案中的任何一种,所以这取决于哪一种最适合你要做的事情。但我认为这个更简单的方案可能是你想要的。
即使父元素具有“visibility: hidden”也是有效的。
有没有办法让一个盒子透明,但里面的文字不透明?
不透明度不会继承,但由于父元素具有应用于其内部所有内容的不透明度。您无法使子元素比父元素更不透明。
这样做的一种方法是:用该文字制作自己的图片,并将背景颜色设置为与您的盒子透明的背景颜色相同,但使用图片而不是 div
是的,设置具有 alpha 通道/值的背景。半透明黑色为:
background-colour: rgba(0,0,0,0.5);
background-color: rgba([0-255], [0-255], [0-255], [0.0-1.0]
@damien,将盒子包装在一个容器中,并为其设置 position:relative,在子盒子中设置不透明度,将文字元素作为不透明盒子的兄弟节点,并使用 position:absolute 将其放置在兄弟节点之上。
先生,我想在 JavaScript 中找出不透明度,并显示消息
还可以通过 colorclass 脚本将 class 设置为“%4”以将背景不透明度更改为 0.4。
参考此网站:http://colorclass.ir/
请找到以下问题的解决方案:
CSS 不透明度仅应用于背景颜色,而不是其上的文字?
http://ankithackingtips.blogspot.com/2016/04/css-opacity-only-to-background-color.html
gfghf h
哦,这是一个基本的 CSS 课程
Earch
哦,这是一个基本的 CSS 课程
如何更改背景图片的不透明度?
我遇到一个问题,我无法理解,...... 我是 CSS 新手,我试图对页面上的多个图片实施不透明度。使用以下代码
我可以使我的图片不透明,直到我将鼠标悬停在它们上面,...... 但是,如何仅将此应用于页面上的特定图片?
嗨 Andrew,
您需要创建一个类,并在您希望拥有透明度的图片上调用它。
CSS
HTML
嗨,
我有一个页面,其中包含一个背景图片和许多本身具有颜色背景的 CSS 元素。
我添加了
body {
opacity: 0.6;
这非常适合元素的透明度,但所有文字也变得透明。
你能给我指点一下方向吗?我仍在学习 CSS。
嘿 Colin!是的,这是在具有其他元素的元素上使用不透明度的负面影响:所有内容都变得不透明。
您可以尝试将背景图片分离到其他元素之外的单独元素中,并尝试使用绝对定位将其与其他所有元素对齐。这样,它将被隔离,因此不透明度只影响它。
我需要覆盖他们已经使用的 background-color!important。所以我想将背景不透明度设置为 0。我不能使用 RGBA(0,0,0,0)。还有其他方法可以在 CSS 中做到吗?
visibility: hidden 与 opacity: 0 不同
例如,在按钮上同时使用 opacity: 0 和 visibility: hidden。使用 opacity: 0 你仍然可以点击按钮,但使用 visibility: hidden 你就无法点击了。
如何在一个透明的 div 上显示强烈的文字?我不想使用 rgba,我想用 opacity 来实现。告诉我一个方法。
在这个网站 https://www.w3.org/TR/css-color-3/#transparency,在“透明度”的属性定义中,有以下文字
但这到底是什么意思?谢谢!
我错了
<<…在“透明度”的属性定义中,有…>>
当然是指“opacity”