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

css只设置背景图片半透明,css 设置背景色或图片半透明的方法(图文)css设置背景颜色半透明或者设置背景图片半透明,但有的时候只需要设置最外层的div为半透明里面的内容不需要设置下面介绍一下这两种情况1.设置html元素你面内颜色和图片都为半透明状态支持IE浏览器.bg1{background:#000;opacity:0.5;filter:progid:DXImageTransform.Microsoft.alpha(opacity=50);}2.设置htm…

大家好,又见面了,我是你们的朋友全栈君。

css设置背景颜色半透明或者设置背景图片半透明,但有的时候只需要设置最外层的div为半透明里面的内容不需要设置

下面介绍一下这两种情况

1.设置html元素你面内颜色和图片都为半透明状态支持IE浏览器

.bg1{

background:#000;

opacity: 0.5;

filter: progid:DXImageTransform.Microsoft.alpha(opacity=50);

}

2.设置html元素最外层的颜色为半透明,子元素不进行设置:

.bg2{

background:rgba(0,0,0,0.5);/*前三个参数为rgb颜色,第四个参数为透明度*/

filter:progid:DXImageTransform.Microsoft.gradient(startcolorstr=#7F000000,endcolorstr=#7F000000);/*#7F000000的前两位为16进制透明度,后六位为16进制颜色*/

}

下面给出上面两种情况的测试代码:

设置背景半透明

.bg1{

background:#000;

opacity: 0.5;

filter: progid:DXImageTransform.Microsoft.alpha(opacity=50);

}

.bg2{

background:rgba(0,0,0,0.5);/*前三个参数为rgb颜色,第四个参数为透明度*/

filter:progid:DXImageTransform.Microsoft.gradient(startcolorstr=#7F000000,endcolorstr=#7F000000);/*#7F000000的前两位为16进制透明度,后六位为16进制颜色*/

}

aafaa

sdfsd

red

f5e1892ffcfe575e9ba12067d14cf5a4.png

aafaa

sdfsd

red

f5e1892ffcfe575e9ba12067d14cf5a4.png

css背景半透明的设置效果图如下:

021c81a66fe7958dd80a755d536c5116.png

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请联系我们举报,一经查实,本站将立刻删除。

发布者:全栈程序员-站长,转载请注明出处:https://javaforall.net/160377.html原文链接:https://javaforall.net

(0)
全栈程序员-站长的头像全栈程序员-站长


相关推荐

  • xshell为什么老会突然连接不上虚拟机_虚拟机配置xshell连接

    xshell为什么老会突然连接不上虚拟机_虚拟机配置xshell连接问题背景最近一段时间在研究docker的使用时,在VM中安装了CentOS7.6,配置了静态IP,使用Xshell连接虚拟机,发现响应的速度特别慢,大概得有10秒钟才能连上。具体描述使用Xshell连接配置好的主机,会在这个地方停留至少十秒钟。Xshell6(Build0111)Copyright(c)2002NetSarangComputer,Inc.Allrightsr…

    2022年9月22日
    0
  • Maven 菜鸟教程 1 安装和配置[通俗易懂]

    Maven 菜鸟教程 1 安装和配置[通俗易懂]统一管理jar文件,自动处理jar文件之间的依赖关系统一项目的目录结构,对于不同IDE软件(如Eclipse,IntelliJIDEA)是透明的自动构建:打包,部署,升级jar文件简单方便

    2022年9月8日
    0
  • textCNN初探

    textCNN初探文章目录目录1.什么是textCNN1.1textCNN提出的背景1.2textCNN合理性分析2.textCNN相比于传统图像领域的CNN有什么特点?3.textCNN例子讲解3.1参数和超参数3.2textCNN的数据3.3textCNN的网络结构定义3.4代码目录1.什么是textCNN1.1textCNN提出的背景我们知道,CNN在图像领域应用的比较好了,那么C…

    2022年6月28日
    22
  • python random.randint函数用法(random.randint()是什么意思)

    numpy.random.randint(low,high=None,size=None,dtype=’l’)函数的作用是,返回一个随机整型数,范围从低(包括)到高(不包括),即[low,high)。如果没有写参数high的值,则返回[0,low)的值。参数如下:low:int生成的数值最低要大于等于low。(hign=None时,生成的数值要在[0,low)区间内)high:i…

    2022年4月16日
    835
  • 解读非主流_所谓的非主流

    解读非主流_所谓的非主流解读非主流——当非主流成为主流互联网上非主流信息以几何级数倍增,作为非主流信息集聚载体的网站的建设者的我们——站长,该如何应对呢?如何适应这种大环境大气候的变化呢?《谁动了我的奶酪》告诉我们,要感觉良好,就好主动变化,而非被动挨打。全面投入非主流《——》主流的管道建设,实在是当务之急,也是有利可图的聪明人做的事情。下面就从主流的角度,解读下非主流…

    2022年10月17日
    0
  • 眼下最好的JSP分页技术

    眼下最好的JSP分页技术

    2021年11月23日
    38

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

关注全栈程序员社区公众号