css怎么设置div的透明度

css设置div透明度的方法:首先新建一个html文件;然后创建两个div,分别设置其class属性为div1和div2;最后使用opacity或“-moz-opacity”属性设置两个div的透明度即可。

css怎么设置div的透明度

本文操作环境:windows7系统、HTML5&&CSS3版、Dell G3电脑。

新建一个html文件,命名为test.html,用于讲解div在css中透明度怎么调。

c95dc730dd5b54dcf31a5977bfd8d4b.png

在test.html文件内,创建两个div,分别设置其class属性为div1、div2,用于下面使用css对类名进行样式的设置。

立即学习“前端免费学习笔记(深入)”;

 

6e47efc050c191e6c5733429270f81c.png

使用css统一设置两个div绝对定位在页面的顶部,并浮动向左。这样布局可以让两个div重叠,设置透明度时可以看到明显的效果。

 

9d6eea8ee8c6d5691463bf5d4fa9a47.png

使用css设置类名为div1的div宽度为400px,高度为200px,背景颜色为黄色。

 

f5128030309ebf7c442ead47ac5a58f.png

使用css设置类名为div2的div宽度为100px,高度为100px,背景颜色为绿色。

c376df9b58da4209a2a420a7742bee7.png

使用css设置类名为div2的div透明度。针对IE浏览器使用filter属性设置,针对firefox浏览器使用-moz-opacity属性设置,其他的浏览器使用opacity属性设置。透明度值越小,越透明。例如,下面设置div透明度为30%

 

31e8daf255bffb3f7151cbcf2e39af0.png

在浏览器打开test.html文件,查看设置了透明度的div的效果。

 

2a7605a04fc0de28b0b73499dae35b9.png

更多详细的HTML/CSS知识,请访问CSS视频教程栏目!

以上就是css怎么设置div的透明度的详细内容,更多请关注【创想鸟】其它相关文章!

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

发布者:PHP中文网,转转请注明出处:https://www.chuangxiangniao.com/p/2951371.html

(0)
上一篇 2025年3月11日 23:36:05
下一篇 2025年2月19日 13:35:12

AD推荐 黄金广告位招租... 更多推荐

相关推荐

  • css怎么设置文本框大小

    css设置文本框大小的方法:首先新建一个html文件;然后使用input标签创建一个type类型为text的文本框;最后使用width属性和height属性设置input的宽度和高度即可。 本文操作环境:windows7系统、HTML5&a…

    2025年3月11日 编程技术
    200
  • css中auto什么意思

    css中auto是自动适应的意思,并且在css中auto往往都是默认值,比如代码“margin:0 auto”,意思就是上下边距为0,左右边距为auto,就是自动适应。 本文操作环境:windows7系统、HTML5&&CS…

    2025年3月11日
    200
  • css怎么设置超链接不可点击

    css设置超链接不可点击的方法:首先通过“cursor:pointer;”属性使鼠标变成箭头;然后通过“pointer-events:none;”属性使超链接失效不可点击即可。 本文操作环境:windows7系统、HTML5&&am…

    2025年3月11日
    200
  • css是干什么的

    CSS是能够真正做到网页表现与内容分离的一种样式设计语言,主要用来设计网页的样式,美化网页。CSS能够对网页中元素位置的排版进行像素级精确控制,且不仅可以静态地修饰网页,还可以配合各种脚本语言动态地对网页各元素进行格式化。 本教程操作环境:…

    2025年3月11日
    200
  • 为什么css的样式不起作用

    css样式不起作用的原因:1、浏览器有缓存;2、html标签没写完整,漏了“”、“/”等;3、css语法出错,例如写错属性名、使用中文或全角符号;4、未关联外部CSS样式表或关联路径出错;5、样式表保存的编码错误;6、样式被层叠。 本教程操…

    2025年3月11日
    200
  • css无法显示图片怎么办

    css无法显示图片的解决办法:1、检查css调用是否成功;2、检查div设置是否错误;3、检查背景图片调用路径并修改;4、设置背景元素的宽度和高度;5、将元素设置具备块属性;6、检查是否被同名css类的样式所覆盖并修改即可。 本文操作环境:…

    2025年3月11日
    200
  • css hover怎么设置

    css hover是一种用于选择鼠标指针浮动在上面的元素的选择器,该选择器的设置语法如“a:hover{background-color:yellow;}”。 本文操作环境:windows7系统、HTML5&&CSS3版、D…

    2025年3月11日
    200
  • jsp怎么引入css

    jsp引入css的方法:1、在link标签中使用href属性引入css文件路径;2、使用内部样式表引入css;3、内联样式引入css。 本文操作环境:windows7系统、CSS3版、Dell G3电脑。 JSP页面引入CSS样式有三种方法…

    2025年3月11日
    200
  • css设置边框的属性有哪些

    设置边框的属性:border、border-color、border-style、border-width、border-image、border-radius、border-bottom、border-left、border-top等。 …

    2025年3月11日
    200
  • css background为什么不显示

    css background不显示的原因:1、css没有被调用;2、background属性名书写出错或背景图片路径出错;3、背景元素没有内容填充,也没设置width和height;4、元素不具备块属性;5、被同名css类的样式所覆盖。 本…

    2025年3月11日
    200

发表回复

登录后才能评论