首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

css只设置背景图片半透明,css 设置背景色或图片半透明的方法(图文)

css设置背景颜色半透明或者设置背景图片半透明,但有的时候只需要设置最外层的div为半透明里面的内容不需要设置 下面介绍一下这两种情况 1.设置html元素你面内颜色和图片都为半透明状态支持IE浏览器...#000; opacity: 0.5; filter: progid:DXImageTransform.Microsoft.alpha(opacity=50); } 2.设置html元素最外层的颜色为半透明...startcolorstr=#7F000000,endcolorstr=#7F000000);/*#7F000000的前两位为16进制透明度,后六位为16进制颜色*/ } 下面给出上面两种情况的测试代码: 设置背景半透明...#7F000000的前两位为16进制透明度,后六位为16进制颜色*/ } aafaa sdfsd red aafaa sdfsd red css...背景半透明的设置效果图如下: 发布者:全栈程序员栈长,转载请注明出处:https://javaforall.cn/160377.html原文链接:https://javaforall.cn

2.4K10
您找到你想要的搜索结果了吗?
是的
没有找到

CSS伪元素的妙用--单标签之美

单个颜色实现按钮 hover 、active 的明暗变化 最近项目有个这样的需求,根据不同的业务场景,运营需要配置一个按钮的不同背景色值。...当然改变亮度,还可以通过叠加透明层实现,这里使用伪元素改变按钮背景色就是通过叠加半透明层实现。...简单来说,在背景色上方叠加一个白色半透明层 rgba(255,255,255,.2) 可以得到一个更亮的颜色。...(这句话不是很严谨,假设一个元素背景是纯白颜色,叠加白色半透明层也是不会更亮的) 反之,在背景色上方叠加一个黑色半透明层 rgba(0,0,0,.2) 可以得到一个更暗的颜色。...所以,我们用 before 伪元素生成一个与按钮大小一致的黑色半透明层 rgba(0,0,0,.2),在 .btn:hover:before 时显示,用 after 伪元素生成一个与按钮大小一致的白色半透明

1.6K100

伪元素的妙用–单标签之美

单个颜色实现按钮 hover 、active 的明暗变化 最近项目有个这样的需求,根据不同的业务场景,运营需要配置一个按钮的不同背景色值。...当然改变亮度,还可以通过叠加透明层实现,这里使用伪元素改变按钮背景色就是通过叠加半透明层实现。...简单来说,在背景色上方叠加一个白色半透明层 rgba(255,255,255,.2) 可以得到一个更亮的颜色。...(这句话不是很严谨,假设一个元素背景是纯白颜色,叠加白色半透明层也是不会更亮的) 反之,在背景色上方叠加一个黑色半透明层 rgba(0,0,0,.2) 可以得到一个更暗的颜色。...所以,我们用 before 伪元素生成一个与按钮大小一致的黑色半透明层 rgba(0,0,0,.2),在 .btn:hover:before 时显示,用 after 伪元素生成一个与按钮大小一致的白色半透明

76910

CSS进阶】伪元素的妙用--单标签之美

单个颜色实现按钮 hover 、active 的明暗变化 最近项目有个这样的需求,根据不同的业务场景,运营需要配置一个按钮的不同背景色值。...当然改变亮度,还可以通过叠加透明层实现,这里使用伪元素改变按钮背景色就是通过叠加半透明层实现。...简单来说,在背景色上方叠加一个白色半透明层 rgba(255,255,255,.2) 可以得到一个更亮的颜色。...(这句话不是很严谨,假设一个元素背景是纯白颜色,叠加白色半透明层也是不会更亮的) 反之,在背景色上方叠加一个黑色半透明层 rgba(0,0,0,.2) 可以得到一个更暗的颜色。...所以,我们用 before 伪元素生成一个与按钮大小一致的黑色半透明层 rgba(0,0,0,.2),在 .btn:hover:before 时显示,用 after 伪元素生成一个与按钮大小一致的白色半透明

1.1K120

《小白HTML5成长之路31》半透明背景的自定义弹窗是怎么用CSS布局的

于是小白也准备自己通过css布局一个弹窗试试,一来以后肯定会用上这个功能,二来熟悉一下最近掌握的CSS+HTML布局。 说干就干,小白打开webStrom做起了弹窗的布局。...里面的dialog容器小白根据刚学习的CSS溢出法让dialog上下都居中。...layer上增加了opacity:0.5这个半透明属性,小白满怀信息的刷新了页面,当看到结果时小白发现背景和窗口都变成了半透明。...不一会小白找到老朱,说道:“我改好了,现在我给dialog添加了一个layerbg容器作为背景层,然后把layer之前的背景色和透明度去掉,放到了新增加的背景层上面,背景层高和宽与layer一样所以这样就不会把...dialog也变成半透明了。

1.9K100

现代 CSS 解决方案:文字颜色自动适配背景色

实现: 在 :hover 状态下,根据背景色,将背景亮度 l 调整为原背景色的 1.2 倍 在 :avtive 状态下,根据背景色,将背景亮度 l 调整为原背景色的 0.8 倍 在实际业务中,这是一个非常有用的用法...在之前,纯 CSS 没有特别好的方案,可以利用 mix-blend-mode: difference 进行一定程度的适配: div { // 不确定的背景色 } p { color: #...有了 CSS 相对颜色后,我们有了更多的纯 CSS 方案。 利用 CSS 相对颜色,反转颜色 我们可以利用相对颜色的能力,基于背景色颜色进行反转,赋值给 color。...利用这个 CSS 颜色函数,可以完美的解决上述的问题。 我们只需要提供 #fff 白色和 #000 黑色两种可选颜色,将这两种颜色和提供的背景色进行比较,系统会自动选取对比度更高的颜色。...Demo -- CSS Relatvie Color Adapt BG 此方案的优势在于: 可以限定前景 color 颜色为固定的几个色值,以保证 UI 层面的统一及美观 满足任何情况下的背景色 当然

33510
领券