网页中如何使用透明

作者: 8fda73aa8a1f | 来源:发表于2016-03-04 07:57 被阅读195次

其实我写文章算起来也马上两个月了,中途做过很多摸索,也不断的尝试过各个方向,最终的结论还是决定回归主题,文章依然围绕我的老本行--前端开发进行展开,也许写鸡汤可以更快的增加粉丝,但这段时间的感觉是:增粉并不是我的目的,能帮到更多人,才是我的最终宗旨。

既然是回归主题,那我就每天都来分享一点前端开发行业的一点儿东西吧,不管大小,实用就好。其实说实话,每天写一篇文章真的是一件很不易的事情,我是一个程序猿,很难写出华丽的辞藻,文章难免有一些枯燥乏味,但是如果能给粉丝朋友一点实实在在的帮助,我想依然可以有一帮忠实的粉丝。

从今天起,我将不以增粉为目的的进行分享,在此感谢一开始就关注我的朋友们对我这段时间东拉西扯的包容。今天我给大家分享一个很简单的网页效果,那就是透明。

透明在网页中并不陌生,在很多场景都会用到,比如下面这种情况:

这种情况我们往往只希望背景透明而内容不透明,那到底如何实现呢?

总体上有两种方式:

1、opacity

2、rgba

它们俩有什么区别呢?

作用范围不同。opacity会作用于选择器所对应的元素以及其子元素,里面的内容均会透明。rgba只会让背景透明,内容不会透明,所以大部分情况下使用rgba会更方便一点。

Hi,我是年轻大叔

罗辑思维前端开发工程师,个人微信公众号:xuebing_wxb

热爱互联网技术,更愿意跟大家分享我的经验与心得

相关文章

  • 网页中如何使用透明

    其实我写文章算起来也马上两个月了,中途做过很多摸索,也不断的尝试过各个方向,最终的结论还是决定回归主题,文章依然围...

  • Fe-5 事件机制事件绑定

    什么是 HTML 以及怎样使用 HTML 编写网页网页的结构是怎样什么是 CSS 以及怎样使用 CSS如何在网页中...

  • 学习网页中的图片如何应用CSS的滤镜的效...

    学习网页中的图片如何应用CSS的滤镜的效... 有时候,我们需要给网页中的图片加一些特殊的效果,比如透明、扭曲、阴...

  • Vue - 区分webpack中导入vue和普通网页中导入vue

    在普通网页中如何使用Vue -1. 使用 script 标签 ,引入 vue 的包-2. 在 index 页面中,...

  • css透明度怎么设置?三种css图片透明度的设置方法

    css透明度的设置在网页的设计中是经常需要用到的,有时为了设计出的网页更加的美观,会对图片进行透明化处理,这样网页...

  • CSS 怎么使用?

    CSS是一组格式的规则,用于控制web网页的外观,修饰网页结构的 如何使用css那? 1.在html网页中,加入一...

  • PyQt5中使用Qprinter打印热敏小票

    在《PyQt5中使用QWebChannel和内嵌网页进行js交互》一文中,我记录了如何使用QWebchannel与...

  • JavaScript

    如何插入JS 使用 标签在HTML网页中插入JavaScript代码。 标签要成对出现,并把JavaScript代...

  • Stackoverflow热门问题

    1. JavaScript如何重定向到其他网页 如何使用JavaScript将用户从一个网页重定向到另一个网页? ...

  • 3.css入门

    1.css是什么? 层叠样式表,用来修饰网页结构,是一组格式设置规则; 2.如何使用? A:在html网页中,加入...

网友评论

  • 34213786aedd:希望下次可以附上代码、谢谢您的分享:yum:
  • be9053389dd2:大叔你好,我是一个前端新手,刚学1个月不到,我碰到了一个问题,用rgba设置背景透明,但是这个透明区域会挡住它的背景阴影(我试了一下,好像只有文字透明了不会挡住阴影~),大叔能不能给解解惑啊?
    be9053389dd2:@王学兵 举个简单例子,建一个50px*50px的div,再给body一个背景色~然后给div设置box-shadow然后给div设置rgba值让这个div透明,这时候div透明了,可是div的透明显示的是body的背景色,而div的box-shadow还是会被div挡住部分
    8fda73aa8a1f: @小名小凡 你的表述我不是特别明白!

本文标题:网页中如何使用透明

本文链接:https://www.haomeiwen.com/subject/ffdokttx.html