实现div背景透明的两种方法


1.使用opacity属性

background-color:#000;
opacity: 0.5;

这样做可以设置div内部所以区域的透明度,但是也会影响里面的文字,效果图:

2、只改变背景透明度,不改变其中文字、图片等透明度的方法

background-color: rgba(0,0,0,0.5);

其中前三位数是设置背景颜色,取值范围是0~255,全部为零代表黑色,全部为255代表白色。
rgba即红色、绿色、蓝色、透明度(英语:Red, Green, Blue、Alpha)。

红色(R)0 到 255 间的整数,代表颜色中的红色成分。。
绿色(G)0 到 255 间的整数,代表颜色中的绿色成分。
蓝色(B)0 到 255 间的整数,代表颜色中的蓝色成分。
透明度(A)取值 0~1 之间, 代表透明度。
效果图:

设置div背景透明的两种方法的更多相关文章

  1. CSS实现自适应不同大小屏幕的背景大图的两种方法(转自简书)

    CSS实现自适应不同大小屏幕的背景大图的两种方法 一张清晰漂亮的背景图片能给网页加分不少,设计师也经常会给页面的背景使用大图,我们既不想图片因为不同分辨率图片变形,也不希望当在大屏的情况下,背景有一块 ...

  2. 华硕笔记本怎么设置u盘启动(两种方法)

    华硕笔记本怎么设置u盘启动(两种方法) 华硕笔记本怎么设置u盘启动.我想用U盘安装系统但是 我不知道如何设置U盘启动,那么该如何设置呢?下面和大家分享一下我的经验,希望能够帮到大家.如果你的系统是预装 ...

  3. 设置div背景透明的CSS样式

    div背景透明样式: 样式代码: .alert{filter:alpha(opacity=100); /* IE */ -moz-opacity:1.0; /* Moz + FF */ opacity ...

  4. 使IE6下PNG背景透明的七种方法任你选

    原文地址:http://blog.csdn.net/mosliang/article/details/6760028 相信如何解决png在ie6下透明的问题困扰了很多人.为了追求更好的页面效果,很多人 ...

  5. Android 通过代码设置radiobutton不同方位图标的两种方法

    更换radiobutton中的图片在xml中很好设置,但对于初学者如何在代码中设置还是不容易找的.没法子,通过看原版api找到两个方法,setCompoundDrawables和setCompound ...

  6. 通过代码设置radiobutton不同方位图标的两种方法

    更换radiobutton中的图片在xml中很好设置,但对于初学者如何在代码中设置还是不容易找的.没法子,通过看原版api找到两个方法,setCompoundDrawables和setCompound ...

  7. 【笔记】让DIV水平垂直居中的两种方法

    今天写的了百度前端学院春季班的任务:定位和居中问题  由于距离上次学习CSS有点久远了,加上以前木有记笔记的习惯,方法忘得只剩下一种,今天通过网上查阅资料总结了以下两种简单的方法让DIV水平垂直居中. ...

  8. 设置emacs启动窗口的两种方法

    1. 设置位置和大小 ;;设置窗口位置为屏库左上角(0,0) (set-frame-position (selected-frame) 0 0) ;;设置宽和高 (set-frame-width (s ...

  9. Vue设置路由跳转的两种方法: <router-link :to="..."> 和router.push(...)

    一.<router-link :to="..."> to里的值可以是一个字符串路径,或者一个描述地址的对象.例如: // 字符串 <router-link to= ...

随机推荐

  1. 在Idea上用JDBC连接mysql数据库

    一.前言 本次操作建立在idea中java环境已配置的基础上 二.操作步骤 1.建立Web项目后,添加驱动包 mysql-connector-java-5.0.8-bin.jar (1)下载mysql ...

  2. 日常Java 2021/10/25

    ArrayList存储数字 import java.util.ArrayList; public class Arr_test { public static void main(String[] a ...

  3. 大规模 K8s 集群管理经验分享 · 上篇

    11 月 23 日,Erda 与 OSCHINA 社区联手发起了[高手问答第 271 期 -- 聊聊大规模 K8s 集群管理],目前问答活动已持续一周,由 Erda SRE 团队负责人骆冰利为大家解答 ...

  4. 重磅丨腾讯云开源业界首个 etcd 一站式治理平台 Kstone

    ​ Kstone 开源 在 CNCF 云原生基金会举办的2021年12月9日 KubeCon China大会上,腾讯云容器 TKE 团队发布了 Kstone etcd 治理平台开源项目. Kstone ...

  5. 容器之分类与各种测试(三)——stack

    stack是栈,其实现也是使用了双端队列(只要不用双端队列的一端,仅用单端数据进出即完成单端队列的功能),由于queue和stack的实现均是使用deque,没有自己的数据结构和算法,所以这俩也被称为 ...

  6. linux之wc命令详解

    Linux系统中wc(Word Count)命令的功能为统计指定文件中的字节数.字数.行数,并将统计结果显示输出. 1.命令格式 wc [options] 文件... 2.命令功能 统计指定文件中的字 ...

  7. Spring Boot简单操作

    目录 一.自定义异常页面 二.单元测试 ​三.多环境选择 四.读取主配置文件中的属性 五.读取List属性 一.自定义异常页面 对于404.405.500等异常状态,服务器会给出默认的异常页面,而这些 ...

  8. C/C++ Qt 数据库SqlRelationalTable关联表

    在上一篇博文中详细介绍了SqlTableModle组件是如何使用的,本篇博文将介绍SqlRelationalTable关联表组件,该组件其实是SqlTableModle组件的扩展类,SqlRelati ...

  9. 全面解析 | 钥匙环服务的应用场景&商业价值

    在互联互通的场景驱动下,同一开发者旗下常常拥有多款应用或者多个应用形态,用户在同一设备的不同应用或端口登录时,即便使用同一帐号,仍需要重复输入密码进行验证,操作复杂,直接影响到用户的使用体验,而华为钥 ...

  10. Java oop 笔记

    摘要网址:http://note.youdao.com/noteshare?id=bbdc0b970721e40d327db983a2f96371