CSS不透明度只对背景颜色,对文字不透明吗?
我可以将 opacity
属性仅分配给 div
的 background
属性,而不分配给其上的文本吗?
我已经尝试过:
background: #CCC;
opacity: 0.6;
但这不会改变不透明度。
Can I assign the opacity
property to the background
property of a div
only and not to the text on it?
I've tried:
background: #CCC;
opacity: 0.6;
but this doesn't change the opacity.
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(11)
听起来您想使用透明背景,在这种情况下您可以尝试使用
rgba()
函数:一个小示例,展示了如何使用
rgba
。截至 2018 年,几乎每个浏览器都支持
rgba
语法。It sounds like you want to use a transparent background, in which case you could try using the
rgba()
function:A small example showing how
rgba
can be used.As of 2018, practically every browser supports the
rgba
syntax.最简单的方法是使用 2 个 div,其中 1 个带有背景,1 个带有文本:
The easiest way to do this is with 2 divs, 1 with the background and 1 with the text:
仅限 Les 用户:
如果您不喜欢使用 RGBA 设置颜色,而是喜欢使用使用十六进制,有解决方案。
你可以使用这样的 mixin:
并使用它
: 还提供:
请参阅如何使用 Less 编译器将十六进制颜色转换为 rgba?
For Less users only:
If you don't like to set your colors using RGBA, but rather using HEX, there are solutions.
You could use a mixin like:
And use it like:
Actually this is what a built-in Less function also provide:
See How do I convert a hexadecimal color to rgba with the Less compiler?
我也有同样的问题。我想要 100% 透明的背景色。只需使用此代码即可;这对我来说非常有用:
您可以在此网页的左侧(联系表单区域)。
I had the same problem. I want a 100% transparent background color. Just use this code; it's worked great for me:
You can see examples on the left side on this web page (the contact form area).
我的技巧是创建一个带有颜色的透明 .png 并使用
background:url()
。My trick is to create a transparent .png with the color and use
background:url()
.这适用于每个浏览器
如果您不希望透明度影响整个容器及其子容器,请检查此解决方法。为了实现这一点,你必须有一个绝对定位的孩子和一个相对定位的父母。 不影响子元素的 CSS 不透明度< /a>
在不影响“儿童”的 CSS 不透明度
This will work with every browser
If you don't want transparency to affect the entire container and its children, check this workaround. You must have an absolutely positioned child with a relatively positioned parent to achieve this. CSS Opacity That Doesn’t Affect Child Elements
Check a working demo at CSS Opacity That Doesn't Affect "Children"
对于遇到此线程的任何人,这里有一个我刚刚编写的名为 thatsNotYoChild.js 的脚本,它可以自动解决此问题:
http://www.impressivewebs.com/fixing-parent-child-opacity/
基本上,它将子元素与父元素分开,但将元素保持在页面上相同的物理位置。
For anyone coming across this thread, here's a script called thatsNotYoChild.js that I just wrote that solves this problem automatically:
http://www.impressivewebs.com/fixing-parent-child-opacity/
Basically, it separates children from the parent element, but keeps the element in the same physical location on the page.
做到这一点的一个好方法就是使用 CSS 3。
在页面顶部创建一个 div 宽度类 - 例如 supersizer:
然后设置以下 CSS 属性:
A great way to do this would be to use CSS 3 indeed.
Create a div width a class - e.g. supersizer on top of your page:
Then set following CSS properties:
最简单的解决方案是创建 3 个
div
。一个将包含另外两个,一个具有透明背景,一个具有内容。使第一个 div 的位置相对,并将透明背景的 div 设置为负z-index
,然后调整内容的位置以适合透明背景。这样你就不会遇到绝对定位的问题。The easiest solution is to create 3
divs
. One that will contain the other 2, the one with transparent background and the one with content. Make the first div's position relative and set the one with transparent background to negativez-index
, then adjust the position of the content to fit over the transparent background. This way you won't have issues with absolute positioning.使用:
此方法适用于所有浏览器。
Use:
This method will work in all browsers.
你不能。你必须有一个单独的 div 就是那个背景,这样你就只能对其应用不透明度。
我最近尝试这样做,因为我已经在使用 jQuery,所以我发现以下是最不麻烦的:
text
div 设置纯色背景色,因为这将是无 JavaScript 的默认设置。text
div 的高度,并将其应用到background
div。我确信有某种 CSS 忍者方法可以只用浮动或其他东西来完成所有这些,但我没有耐心弄清楚。
You can't. You have to have a separate div that is just that background, so that you can only apply the opacity to that.
I tried doing this recently, and since I was already using jQuery, I found the following to be the least hassle:
text
div a solid background color, because that will be the JavaScript-less default.text
div's height, and apply it to thebackground
div.I'm sure there's some kind of CSS ninja way to do all this with only floats or something, but I didn't have the patience to figure it out.