在网页布局中有时为了网页的整体美观,可能需要将网页中的某些部分设置为背景颜色透明,那么如何设置背景颜色透明呢?本篇文章就来给大家介绍一下css设置背景颜色透明的方法。

在css中设置背景颜色透明的方法有两种:一种是通过rgba方式设置,另一种是通过backgroud和opacity设置。

下面我们就来分别看看css中这两种方法实现背景颜色透明的具体实例

1、通过backgroud和opacity设置背景颜色透明

background属性中属性值比较简单,这里就不细说了,大家可以参考css学习手册来了解一下,我们在这里来简单看看opacity属性

opacity属性参数的"不透明度"是以数字表示,从 0.0 至 1.0 都可以,完全透明是 0.0,完全不透明是

1.0,换句话说,数字越大代表元素越不透明。参数除了可以使用"不透明度"之外,还有 inherit

继承父层属性,不过浏览器支援度较差,不建议使用。

看完了对于两种属性的介绍,下面我们就来看通过backgroud和opacity设置背景颜色透明度的具体实例

代码如下:

width:300px;

height:200px;

margin:0 auto;

border:1px solid #ccc;

background:red;

opacity:0.2;

}

背景颜色透明效果如下:

说明:通过backgroud和opacity设置背景颜色透明度,如果背景上面有文字的话,那么文字也会变成透明,就像下面的效果

所以要看情况来使用这种方法来设置背景颜色透明。

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

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

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

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

背景颜色透明

.title_div{

width: 200px;

height: 200px;

line-height: 30px;

text-align: center;

margin:0 auto;

background-color:rgba(220,38,38,0.2);

}

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

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

本篇文章到这里就全部结束了,关于css中更多的知识大家可以参考php中文网css视频教程、css3视频教程、css学习手册和css3学习手册进一步的学习。

php设置背景为透明,css如何设置背景颜色透明?css设置背景颜色透明度的两种方法介绍...相关推荐

  1. css如何设置背景颜色透明?css设置背景颜色透明度的两种方法介绍

    在网页布局中有时为了网页的整体美观,可能需要将网页中的某些部分设置为背景颜色透明,那么如何设置背景颜色透明呢?本篇文章就来给大家介绍一下css设置背景颜色透明的方法. 在css中设置背景颜色透明的方法 ...

  2. css如何设置透明度?设置透明度的两种方法(代码实例)

    在前端页面开发布局的时候,为了给用户呈现不同的效果,经常需要设置透明度,那么css是怎样设置透明度的?本章给大家介绍用css设置透明度的两种方法(代码实例).有一定的参考价值,有需要的朋友可以参考一下 ...

  3. html背景颜色透明度hex,CSS背景颜色设置透明度的两种方法(8位hex和rgba)

    目录 一. 6位HEX转RGBA 二.8位HEX 在写微信小程序的时候,有个需求是按背景颜色 background-color要设透明度0.85,让背景图片 background-image透一点出来 ...

  4. css设置透明度的两种方法

    一.css rgba()设置颜色透明度 语法: rgba(R,G,B,A); RGBA 是代表Red(红色) Green(绿色) Blue(蓝色)和 Alpha(不透明度)三个单词的缩写.RGBA 颜 ...

  5. css如何设置透明度?两种方法

    一.css rgba()设置颜色透明度 语法: rgba(R,G,B,A); RGBA 是代表Red(红色) Green(绿色) Blue(蓝色)和 Alpha(不透明度)三个单词的缩写.RGBA 颜 ...

  6. 台式计算机开机密码设置,台式win10电脑开机密码怎么更改?改台式win10电脑开机密码的两种方法...

    给win10专业版电脑设置开机密码能够保护资料安全,不会被人轻易看到.开机密码是指我们在打开台式电脑后只有在输入正确的密码后才能进入系统.出于安全性考虑我们会设置比较复杂的密码,但是很多人不明白台式w ...

  7. win10定时关机c语言,Win10系统怎么定时关机?Windows10设置定时关机的两种方法

    最近,有位刚刚升级win10系统的用户反映自己在使用完电脑后经常会忘记手动关机,因此为了能够更好地保护电脑,希望在新系统中设置定时关机.这该如何操作呢?接下来,小编就向大家分享Windows10设置定 ...

  8. w10怎么共享计算机文件共享,win10系统如何共享文件夹?windows10设置共享文件夹的两种方法...

    最近,有一些刚刚安装win10正式版系统的用户反映自己因为工作需求想要在局域网内设置文件夹共享,却又不知道该如何操作.这该怎么办呢?接下来,小编就向大家介绍windows10正式版系统中快速设置共享文 ...

  9. CSS设置背景颜色透明的两种方法

    在css中设置背景颜色透明的方法有两种: 一种是通过rgba方法设置,另一种是通过backgroundh和opacity设置 下面分别是css中 两种方法实现的背景颜色透明实例 1,通过backgro ...

最新文章

  1. 无监督学习:大数据带我们洞察现在,但小数据将带我们抵达未来
  2. flatbuffers 和netty的结合使用
  3. 魔方机器人需要特制魔方吗_解魔方的机器人攻略18 – 魔方快速算法
  4. win7计算机中丢失mfc120,mfc120.dll 64位
  5. php 字符串与数字相加,注意!PHP中字符串与数字的比较
  6. 一、Arcgis api js -- 基本概念
  7. macos vmware 镜像_苹果电脑用vMware安装Windows系统
  8. linux sd卡 分区变大,Linux 动态调整分区大小
  9. python函数round()取整保留小数问题
  10. java数字小游戏_java数字小游戏
  11. android 批量扫描,Android:连续扫描所有AP(接入点)
  12. WAV音乐文件无法修改标题
  13. 熵增定律与人际关系-整理
  14. 双系统后适合装matlab吗,安装双系统对电脑有什么影响|电脑装双系统有什么好处和坏处...
  15. python制作微信个人二维码_一个python自动生成微信二维码海报的轮子
  16. Spring/SpringBoot 过滤器修改、获取http 请求request中的参数 和 response返回值,比如修改请求体和响应体的字符编码
  17. 网络安全工程师是做什么的,就业前景怎么样
  18. 基于瑞芯微平台cif接口dvp相机的视频接入(ov2640、rv1126为例)
  19. kali新手入门教学(13)--nc连接
  20. 今日金融词汇---年报,是什么?

热门文章

  1. java.util.ConcurrentModificationException 解决办法
  2. NAT和IPsec并存的几种模型(方案一)
  3. 《卓有成效的管理者》——读书笔记
  4. 云的普及难易,云计算普及的难易
  5. draw.io二次开发(2)文件解读
  6. OpenCV神经网络ANN代码编译运行与解读(一)
  7. 【SmartJob】常规统计部署(报表使用的数据)
  8. HTML DOM中DIV的Style:margin,border,padding
  9. Tomcat项目部署
  10. Java算法面试题 一个顺子带一对