广告位联系
返回顶部
分享到

CSS设置背景颜色透明的两种方法介绍

css 来源:互联网 作者:佚名 发布时间:2023-08-12 21:53:54 人浏览
摘要

1,通过background和opacity设置背景颜色透明 background属性中属性值比较简单,所以我们简单看看opacity属性 opacity属性参数的不透明度是以数字表示,从0.0至1.0都可以,完全透明是0.0,完全

1,通过background和opacity设置背景颜色透明

background属性中属性值比较简单,所以我们简单看看opacity属性

opacity属性参数的“不透明度”是以数字表示,从0.0至1.0都可以,完全透明是0.0,完全不透明是1.0,换句话说,数字越大越不透明。参数除了可以使用"不透明度"之外,还有 inherit 继承父层属性,不过浏览器支援度较差,不建议使用。

通过backgroud和opacity设置背景颜色透明度的具体实例    代码如下:

1

2

3

4

<div style="width: 200px;height: 200px;Object-fit : contain">

        <p class="pp" >哈哈哈哈哈哈</p>

        <img src="../images/d.png"/>

</div>

1

2

3

4

5

6

7

8

.pp{

        width: 200px;

        position: absolute;

        color: white;

        font-size: 18px;

        background-color: #550000;

        /* opacity: 0.2; */

    }

这是未添加opacity属性:

这里是通过background和opacity设置背景透明度,但是上面有文字的话,文字也会变成透明,就下面效果。

所以,看个人需求使用哪种方法才是自己想要的效果。

2,通过rgba方式设置背景色透明

所谓rgba颜色,就是rgba三原色加alpha。在给背景添加颜色的同时,提供透明度特性。

用法:background:rgba(R,G, B, A);

下面我们就来看通过rgba方式设置背景颜色透明度的具体实例:

1

2

3

4

<div style="width: 200px;height: 200px;Object-fit : contain">

        <p class="pp" >哈哈哈哈哈哈</p>

        <img src="../images/d.png"/>

</div>

1

2

3

4

5

6

7

8

.pp{

    width: 200px;

    position: absolute;

    color: white;

    font-size: 18px;

    background-color: rgb(85 0 0 / 46%);

    /* background-color: #550000; */

}

rgba方式设置背景颜色透明度效果前后对比如下:

 说明:通过rgba方式设置背景颜色透明度,可以设置背景颜色透明而文字不透明,但是这种方法的兼容性不好,不兼容ie浏览器。


版权声明 : 本文内容来源于互联网或用户自行发布贡献,该文观点仅代表原作者本人。本站仅提供信息存储空间服务和不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权, 违法违规的内容, 请发送邮件至2530232025#qq.cn(#换@)举报,一经查实,本站将立刻删除。
原文链接 :
相关文章
  • CSS3实现双圆角Tab菜单的详细介绍

    CSS3实现双圆角Tab菜单的详细介绍
    效果图 分析 一个带圆角的矩形 + 左右对称的不规则图形(一个小矩形分别去掉一个圆角),利用伪元素::before::after和box-shadow阴影实现。 代
  • CSS设置背景颜色透明的两种方法介绍
    1,通过background和opacity设置背景颜色透明 background属性中属性值比较简单,所以我们简单看看opacity属性 opacity属性参数的不透明度是以数字表
  • CSS颜色混合的五种实现方式介绍
    如果出现一种颜色就定义一个变量,每次都要维护多个颜色变量太麻烦了。有没有办法只用一个颜色呢?在这里也就是,如何将一个颜色变
  • CSS3中的box-flex弹性盒属性布局介绍
    box-flex是css3新添加的盒子模型属性,它的出现打破了我们经常使用的浮动布局,实现垂直等高、水平均分、按比例划分。但是它有一定的局
  • JS/CSS压缩工具(YUI Compressor)使用方法

    JS/CSS压缩工具(YUI Compressor)使用方法
    YUI Compressor 是一个用来压缩 JS 和 CSS 文件的工具,采用Java开发。方便快捷,压缩后的代码文件体积小,有效率高,当然市面上不乏有很多压
  • CSS中的z-index属性介绍
    本文主要是对z-index属性进行详细的讲解,包括其使用场景、属性效果、适用范围等等。本博客的所有代码执行的浏览器环境,都是以Chrome浏
  • CSS中的hover属性使用方法介绍
    css 的 hover 属性是一种伪类选择器,它可以用来在鼠标悬停在某个元素上时改变该元素或其子元素、同级元素、相邻元素的样式 。hover 属性
  • CSS中外边距塌陷的八种解决方法
    margin-top塌陷是在CSS的盒子模型中出现的一种现象,描述的是当父元素包裹着一个子元素的时候,当给子元素设置margin-top属性时,此时只是想
  • 什么是clearfix (一文搞清楚css清除浮动clearfix)
    clearfix 是一种 CSS 技巧,可以在不添加新的 html 标签的前提下,解决让父元素包含浮动的子元素的问题。这个技巧的版本是很多的,最流行的
  • 如何利用css var函数让你的组件样式输出规范样式
    我们平时在使用Elementui Antdesing这些UI库时,难免会碰到使用deep强行侵入式去修改组件内部样式的情况;比如下列代码,我们需要把ant的分页
  • 本站所有内容来源于互联网或用户自行发布,本站仅提供信息存储空间服务,不拥有版权,不承担法律责任。如有侵犯您的权益,请您联系站长处理!
  • Copyright © 2017-2022 F11.CN All Rights Reserved. F11站长开发者网 版权所有 | 苏ICP备2022031554号-1 | 51LA统计