实现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. 日常Java 2021/10/25

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

  2. 【Android】安装插件 + 改变文字大小、颜色 + 隐藏代码区块的直线

    安装插件 可以在搜寻框里面填入关键字搜寻,具体的插件,网上有很多介绍了 改变文字大小.颜色 隐藏代码区块的直线

  3. Shell脚本的条件控制和循环语句

    条件判断:if语句 语法格式: if [ expression ] then Statement(s) to be executed if expression is true fi 注意:expre ...

  4. c学习 - 第五章:选择结构程序设计

    5.2 关系运算符与逻辑运算符 !(非) ^ 高 算术运算符 | 关系运算符 | &&和 || | 赋值运算符 | 低

  5. jquery datatable使用简单示例

    目标: 使用 jQuery Datatable 构造数据列表,并且增加或者隐藏相应的列,已达到数据显示要求.同时, jQuery Datatable 强大的功能支持:排序,分页,搜索等. Query ...

  6. 【编程思想】【设计模式】【创建模式creational】Borg/Monostate

    Python版 https://github.com/faif/python-patterns/blob/master/creational/borg.py #!/usr/bin/env python ...

  7. 【Python】【Module】time

    #_*_coding:utf-8_*_ __author__ = 'Alex Li' import time # print(time.clock()) #返回处理器时间,3.3开始已废弃 , 改成了 ...

  8. 【Matlab】imagesc的使用

    imagesc(A) 将矩阵A中的元素数值按大小转化为不同颜色,并在坐标轴对应位置处以这种颜色染色 imagesc(x,y,A) x,y决定坐标范围 x,y应是两个二维向量,即x=[x1 x2],y= ...

  9. 【Matlab】快速傅里叶变换/ FFT/ fftshift/ fftshift(fft(fftshift(s)))

    [自我理解] fft:可以指定点数的快速傅里叶变换 fftshift:将零频点移到频谱的中间 用法: Y=fftshift(X) Y=fftshift(X,dim) 描述:fftshift移动零频点到 ...

  10. 加密解密、食谱、新冠序列,各种有趣的开源项目Github上都有

    Github上是我们程序员学习开源代码.提升编程技巧的好地方.好学校,但是除了学习,小伙伴们有没有发现过Github上一些特别有意思的项目呢? 今天TJ君就来和大家分享几个自认为特别有趣的开源项目: ...