当前位置:首页 > 网站建设 > 正文内容

html5背景透明文字不透明(css设置背景透明,文字不透明)

网站建设10个月前 (04-25)466

htmlcss 中让一个DIV的背景色是透明的,但它的内容文字图片之类的不是透明的,这个的话,是可以通过设置2个div来实现的,第一个包裹着第二个div然后在设置相同的div宽高,在将第一个的opacity为0代码如下ltdiv。

html5背景透明文字不透明(css设置背景透明,文字不透明)

1首先我们新建一个html文件,添加一个DIV,设置宽度和高度,以及背景色填充为红色2然后在父级DIV中插入一个子DIV,定义它的宽高,以及背景色3然后我们添加一个透明度的代码opacity064在图层的上方。

1先打开一张背景图片2再在背景图上面写上想写的字3将背景图片图层拖放在文字图层的上面4选中背景图图层,然后再按下“CTRL不放,同时再用鼠标单击背景图图层”,此时背景图图层已经被“闪动的虚线包围”。

取值从0到1,设为1就是不透明了,这里设置为07即可3最后保存文件来到浏览器,就可以看出效果了,有透明色的字体明显要比没加透明的字体要淡一些以上就是设置 html 字体颜色为透明色的方法。

ltdiv style=quotbackgroundcolor rgba0,0,0,03quot这是一个盒子的内容ltdiv 用以下方法可以将标签的背景颜色设置为半透明CSS rgba 函数教程。

lt!DOCTYPE htmllthtml lang=quotenquotlthead ltmeta charset=quotUTF8quot lttitleLOLlttitle ltstyle html, bodymargin 0 padding 0 color #fff backgroundcolor red width 100% height。

2在indexhtml中的ltstyle标签中,对“article”添加样式opacity 05,对“article p”添加样式opacity 13浏览器运行indexhtml页面,此时背景是50%透明度,但字体是不透明的。

扫描二维码推送至手机访问。

版权声明:本文由飞速云SEO网络优化推广发布,如需转载请注明出处。

本文链接:http://zspsrg.cn/post/108646.html

“html5背景透明文字不透明(css设置背景透明,文字不透明)” 的相关文章

制作图片的网站(免费制作图片的网站)

制作图片的网站(免费制作图片的网站)

今天给各位分享制作图片的网站的知识,其中也会对免费制作图片的网站进行解释,如果能碰巧解决你现在面临的问题,别忘了关注本站,现在开始吧!本文目录一览: 1、制作照片的网站 2、说几个图片制作网站~~ 3、有哪些制做图片的网站,类似“创客贴”的求推荐,感谢! 4、有什么国外的图片素材网站?...

网站优化合同(优化合同内容)

网站优化合同(优化合同内容)

本篇文章给大家谈谈网站优化合同,以及优化合同内容对应的知识点,希望对各位有所帮助,不要忘了收藏本站喔。 本文目录一览: 1、如何优化合同流程 2、门户网站维护技术服务协议合同书中技术服务条款怎么写 3、网站建设合同样式 如何优化合同流程 如何针对合同管理中的问题和不足,不断完善合同管理制度...

网站建设?推广(网站建设推广一对一服务)

网站建设?推广(网站建设推广一对一服务)

今天给各位分享网站建设?推广的知识,其中也会对网站建设推广一对一服务进行解释,如果能碰巧解决你现在面临的问题,别忘了关注本站,现在开始吧!本文目录一览: 1、网站建设流程和推广? 2、如何建设网站,如何做网站推广 3、网站建设推广有哪些方式? 4、网站建设通常有哪些步骤?如何推广 5...

民族团结ppt模板免费下载素材(民族团结ppt课件免费下载)

民族团结ppt模板免费下载素材(民族团结ppt课件免费下载)

本篇文章给大家谈谈民族团结ppt模板免费下载素材,以及民族团结ppt课件免费下载对应的知识点,希望对各位有所帮助,不要忘了收藏本站喔。 本文目录一览: 1、如何做好民族团结工作ppt课件 2、简单又好看的民族团结黑板报手绘素材 3、简单的民族团结手抄报内容素材 如何做好民族团结工作ppt课...

软件工程课程设计报告模板(软件综合课程设计报告)

软件工程课程设计报告模板(软件综合课程设计报告)

本篇文章给大家谈谈软件工程课程设计报告模板,以及软件综合课程设计报告对应的知识点,希望对各位有所帮助,不要忘了收藏本站喔。 本文目录一览: 1、求软件工程课设~ 2、请问软件工程的需求分析报告怎么写? 3、软件工程写作文档 4、软件工程可行性报告咋写? 求软件工程课设~ 山东大学软件工...

设计意图万能模板(语文设计意图万能模板)

设计意图万能模板(语文设计意图万能模板)

本篇文章给大家谈谈设计意图万能模板,以及语文设计意图万能模板对应的知识点,希望对各位有所帮助,不要忘了收藏本站喔。 本文目录一览: 1、设计思路模板都有哪些? 2、幼儿园数学教案设计意图怎么写 3、设计思路万能模板是什么? 4、设计思路怎么写?万能模板内容是什么? 5、设计思路万能模...