设置div背景透明的方法

2021-01-27 10:09发布

站内问答 / 云计算
4315 8 8
发送
8条回答
studentaaa
2楼 · 2021-01-27 10:22

1.使用opacity属性

background-color：#000;opacity: 0.5;12

这样做可以设置div内部所以区域的透明度，但是也会影响里面的文字。

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

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

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

红色（R）0 到 255 间的整数，代表颜色中的红色成分。。
绿色（G）0 到 255 间的整数，代表颜色中的绿色成分。
蓝色（B）0 到 255 间的整数，代表颜色中的蓝色成分。
透明度（A）取值 0~1 之间， 代表透明度。


芒果
3楼 · 2021-01-27 15:11

第一种使用opacity：0~1，这个方法有个缺点，就是内容也会跟着透明；

第二种方法就是background-color:rgba(0,0,0,0~1)，使用这个方法就只会设置div背景透明，而不会影响到div里的内容

Sophia
4楼 · 2021-01-27 16:26

opacity:0.50;//1不透明，0看不见，这行给谷歌这种游览器用
filter:alpha(opacity=50)//这行是给IE游览器用的

aijingda
5楼 · 2021-01-27 16:47

法子一：直接编纂图片

直接将图片在图片编辑软件中（比如PS）编辑出自身想要的半无色造诣。

法子二：哄骗CSS滤镜

filter设置装备摆设图片后援半无色成就，流弊为图片及文字都邑泛起半通明成效。

1、对应设置装备摆设半通明CSS代码：

filter:alpha(opacity=60);-moz-opacity:0.6;opacity:0.60;

2、注解代码：

filter:alpha(opacity=50); /*支持 IE 阅读器*/
-moz-opacity:0.50; /*赞成 FireFox 涉猎器*/
opacity:0.50; /*支持 Chrome, Opera, Safari 等阅读器*/

3、实例HTML CSS代码





filter滤镜配置半无色效果 CSS5




学习css在CSS5意图问题和学习不错


深造css在CSS5规划标题和进修不错

以上代码可直接拷贝上来，保留HTML后，阅读器测试看看成就。


freediandianer
6楼 · 2021-01-28 09:21

1.通过opacity属性设置，取值0~1,0表示透明，1表示不透明，但是这种方法会把div上的内容也同时进行透明设置。

2.通过rgba格式的background-color设置，格式为：background-color:rgba(0,0,0,0~1)，0表示透明，1表示不透明。

一条哈士奇
7楼 · 2021-01-28 11:31

一、css rgba()设置颜色透明度

语法：

rgba（R,G,B,A）;

RGBA 是代表Red（红色） Green（绿色） Blue（蓝色）和 Alpha（不透明度）三个单词的缩写。RGBA 颜色值是 RGB 颜色值的扩展，带有一个 alpha 通道 - 它规定了对象的不透明度。

rgba（)里的值的介绍：

R：红色值。正整数 （0~255）

G：绿色值。正整数 （0~255）

B：蓝色值。正整数（0~255）

A：透明度。取值0~1之间

rgba()只是单纯的可以设置颜色透明度，这样在页面的布局中有很多应用。比如说：让背景出现透明效果，但上面的文字不透明。

小小邓
8楼 · 2021-02-02 09:31

新建一个html文件，命名为test.html，用于讲解在div+css中怎么让背景颜色透明。

在test.html文件内，使用div标签创建一个模块，用于测试。

 

在test.html文件内，设置div的class属性为soudiv，用于样式的定义。

在css标签内，通过class设置div的样式，定义其宽度为150px，高度为150px，背景颜色为绿色。

在css标签内，再使用opacity设置背景颜色的透明度，例如，将透明度设置为0.2。其中透明度的范围为0至1，值越小越透明。

在浏览器打开test.html文件，查看实现的效果。

总结：

1、使用div标签创建一个模块。

2、在css标签内，使用opacity设置背景颜色的透明度。


相关问题推荐

  • 云计算，计算机专业的能进行自学吗？网上有好的视频课2020-11-30 10:35
    回答 77

    云计算话题太大了，建议学具体点的可落地的，找个培训班摸两月项目比自学找各种杂资料性价比更高

  • 交换机哪个端口是进线2021-01-19 09:42
    回答 4

    交换机不分进线和出线，找个接口插上即可。交换机每一端口都可视为独回立的物理网段（注：答非IP网段），连接在其上的网络设备独自享有全部的带宽，无须同其他设备竞争使用。当节点A向节点D发送数据时，节点B可同时向节点C发送数据，而且这两个传输都享有网络...

  • linux 怎样查看kafka的某 topic数据2020-06-12 20:15
    回答 16

    查看topic分布情况kafka-list-topic.sh：bin/kafka-list-topic.sh-zookeeper 192.168.197.170:2181,192.168.197.171:2181 （列出所有topic的分区情况）bin/kafka-list-topic.sh-zookeeper 192.168.197.170:2181,192.168.197.171:2181-t...

  • 编码的特点是什么2021-02-04 10:06
    回答 6
    已采纳

    1.鉴别 编码是鉴别信息分类对象的唯一标识。2.分类 当分类对象按一定属性分类时，对每一类别设计一个编码，这时编码可以作为区分对象类别的标识。这种标识要求结构清晰，毫不含糊。3.排序 由于编码所有的符号都具有一定的顺序，因而可以方便地按此顺序进行排...

  • 什么是静态资源，什么是动态资源2021-05-17 11:46
    回答 6
    已采纳

    静态资源和动态资源的概念：静态资源：我的理解是前端的固定页面，这里面包含HTML、CSS、JS、图片等等，不需要查数据库也不需要程序处理，直接就能够显示的页面。具体形式为：客户端发送请求到web服务器，web服务器拿到对应的文件，返回给客户端，客户端解析...

  • UI难还是编程比较难？2021-01-08 17:40
    回答 39

    编程和UI，一个程序向，每天更多的面对满屏幕的代码，对逻辑思维和数学有基本要求。UI设计则是美术向，网站UI、app应用UI和游戏UI要求又不一样（游戏要求更高）。一个好的UI设计师需要具备平面设计，交互设计，手绘等等。...

  • linux如何查看zookeeper是否启动？2020-04-23 12:17
    回答 4
    已采纳

    查看进程--方法：ps -aux | grep 'zookeeper'系统有百返回，说明zookeeper启动。linux上进程有5种状态:运行(正在运行或在运行队列中等待)；中断度(休眠中, 受阻, 在等待某个条件的形成或接受到信号)；不可中断(收到信号不唤醒和不可运行, 进程必须等...

  • 编码的作用和意义2021-02-04 10:07
    回答 7
    已采纳

    数字编码的作用和意义如下：1、归档整理方便，特别在电子管理系统中。2、数字编码更容易进行管理，无论谁进行的编码都是一样，管理方便，人员无论怎么换，程序和事务不会乱。3、从数字上能得到详细的对应信息，譬如年月日甚至时分秒、单位、部门、建档人等等...

  • 优化神经网络训练方法有哪些？人工智能 2022-09-06 10:32
    回答 0

  • net.core.netdev_max_backl2021-12-13 14:01
    回答 3

    TCP SYN_REVD, ESTABELLISHED 状态对应的队列TCP 建立连接时要经过 3 次握手，在客户端向服务器发起连接时，对于服务器而言，一个完整的连接建立过程，服务器会经历 2 种 TCP 状态：SYN_REVD, ESTABELLISHED对应也会维护两个队列：一个存放 SYN ...

  • 为什么说net.core.somaxconn是全局2021-12-13 14:00
    回答 3

    对于一个TCP连接，Server与Client需要通过三次握手来建立网络连接.当三次握手成功后,我们可以看到端口的状态由LISTEN转变为ESTABLISHED,接着这条链路上就可以开始传送数据了.每一个处于监听(Listen)状态的端口,都有自己的监听队列.监听队列的长度,与如下两方...

  • net.ipv4.tcp_abort_on_ove2021-12-09 14:50
    回答 5
    已采纳

    设置该参数为 1 时，当系统在短时间内收到了大量的请求，而相关的应用程序未能处理时，就会发送 Reset 包直接终止这些链接。建议通过优化应用程序的效率来提高处理能力，而不是简单地 Reset。默认值： 0。...

  • 参数net.ipv4.tcp_syncookies2021-12-07 14:32
    回答 7

    *tcpsyncookies是一个开关，是否打开SYN Cookie功能，该功能可以防止部分SYN×××。tcpsynackretries和tcpsynretries定义SYN的重试次数。YN Cookie是对TCP服务器端的三次握手做一些修改，专门用来防范SYN Flood×××的一种手段。它的原理是，在TCP服务器接...

  • net.ipv4.tcp_max_syn_back2021-12-07 14:32
    回答 7
    已采纳

    该参数决定了系统中处于 SYN_RECV 状态的 TCP 连接数量。SYN_RECV 状态指的是当系统收到 SYN 后，作了 SYN+ACK 响应后等待对方回复三次握手阶段中的最后一个 ACK 的阶段。

  • 客户端配置 NAT 后仍无法访问 ECS 或 RD2021-12-02 09:20
    回答 6

    先重头检查一下是不是配置出现问题，不行的话重装软件试试

  • 怎么把MySQL服务 加入开机自启动mysql 2021-11-24 13:36
    回答 10

    首先是我们将鼠标移动到如下图所示的计算机的图标上，点击右键，选择管理。然后我们点击如下图界面中的服务和应用程序。接下来可以看到它下面有一个我们的目标——服务。服务的话它是按字母排列的，我们往下拉，找到Mysql服务。此时可以看到它是一个手动启动...

没有解决我的问题，去提问