css设置背景透明度

css通过设置透明度可以得到遮罩效果,今天咪咪我就来给大家讲解一下css透明度的设置方法。

操作方法

  • 01

    如图,打开webstorm,然后新建一个html界面,在html界面里面我添加了一个div标签。

  • 02

    接着我们给body标签设置背景,这里我就随意的给body标签添加了一个背景。

  • 03

    之后,打开浏览器预览,可以看到body已经拥有了背景。

  • 04

    接着我们再设置div的宽度高度并且设置成蓝色背景。

  • 05

    再去预览看看效果,可以看到div有了蓝色的背景,但是背景是不透明的,所以它就把原来body的背景给覆盖掉了。

  • 06

    之后我们修改div的背景,如图所示,使用rgba,括号里面的最后一个参数0.4就是设置透明度的,透明度从0到1,越小表示越透明。前面三个参数是设置颜色的。

  • 07

    之后,再来看看效果。此时的div已经有了半透明的背景,所以它就不会覆盖掉body的背景了哦,这样就可以得到遮罩效果,非常神奇哦。

(0)

相关推荐

  • css设置背景颜色的方法和设置背景颜色的透明度

    css设置背景颜色的方法和设置背景颜色的透明度 操作方法 01 新建html文件 02 创建p标签和背景颜色用#色值表示 03 预览效果如图 04 创建p标签和背景颜色用英文设置背景颜色 05 预览效 ...

  • css设置背景不重复

    css设置背景图片,默认的样式是图片重复,有的时候页面只需要一个不重复的背景图片,这就需要使用到css背景图片重复属性 background-repeat: no-repeat;进行设置. 操作方法 ...

  • css设置背景图片平铺方式

    css设置背景图片平铺方式 repeat:沿水平竖直两个方向平铺,这也是默认值 no-repeat:不平铺,即只显示一次 repeat-x:只沿水平方向平铺 repeat-y:只沿竖直方向平铺 操作方 ...

  • css设置背景图片大小

    网页的某些装饰可以通过背景图片来渲染,使得网页更加美观,CSS设置背景图片,不仅仅是大小,还有位置,放大方式,透明化之类.都是必备的CSS技能.层叠样式表(英文全称:Cascading Style S ...

  • css设置背景图片居中;css背景图片自动居中

    如何通过css设置一张背景图片自动水平垂直居中呢?可以通过css提供的background-position: center进行设置. 设置代码: .bg-img{ height: 100vh; wi ...

  • 如何用CSS设置背景图片

    我们经常会看一些如游戏.电影.购物网上那种五颜六色的网页画面,包括导航菜单,网页主题背景,红的,黑的,(如小简头,像框等)五颜六色的都有,那么我们如何在网页中设置背景图片呢? 列:设置元素背景属性 0 ...

  • css设置body背景图片随内容增加多少显示多少

    操作方法 01 css设置body背景图片随内容增加多少显示多少经验篇 在CSS布局时,可能有时会遇到对body直接设置图片作为网页背景水平纵向平铺(从上到下居中平铺),此时整个网页无论内容是否占满一 ...

  • CSS背景实例:设置背景颜色

    CSS 代码均位于 HTML 的 head 部分,这样做的目的是为了利于演示例子本身.在实际的开发中,使用 CSS 最好的方式是引用外部样式表.这里分享怎样设置背景颜色 步骤/方法 01 在编辑器中输 ...

  • Win10任务切换背景透明度怎么随意调节?

    在Win10中,按Alt+Tab切换任务时,缩略图窗口会有暗色透明背景来衬托.虽然设置中没有关于这个背景透明度的调节项,但我们还是可以通过注册表对其进行任性调节.而且,可以调节的不止这个背景,就连调节 ...