html怎样调节背景透明度,css设置背景透明度的方法是什么
css设置背景透明度的方法是什么
发布时间:2020-09-01 15:43:28
来源:亿速云
阅读:83
作者:小新
这篇文章将为大家详细讲解有关css设置背景透明度的方法是什么,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。
实现背景透明有多种方式,本文为大家介绍以下两种方式:
css3的opacity:x,x 的取值从 0 到 1,如opacity: 0.8
css3的rgba(red, green, blue, alpha),alpha的取值从 0 到 1,如rgba(255,255,255,0.8)
一、css3的opacity
兼容性:IE6、7、8不支持,IE9及以上版本和标准浏览器都支持
使用说明:设置opacity元素的所有后代元素会随着一起具有透明性,一般用于调整图片或者模块的整体不透明度
背景透明度
.demo{
padding: 25px;
background-color:#000000;
filter:alpha(opacity:50); opacity:0.5; -moz-opacity:0.5;-khtml-opacity: 0.5;
}
.demo p{
color: #FFFFFF;
}
背景透明,文字也透明
使用opacity后整个模块都透明了,展现如下:
那么使用opacity实现《背景透明,文字不透明》是不可取的。
(视频教程推荐:css视频教程)
二、css3的rgba
所谓RGBA颜色,顾名思意就是R+G+B+A的颜色,再具体点就是red+green+blue+alpha的颜色,翻译一下就是红+绿+蓝+Alpha透明的颜色。background:rgba(200, 54, 54, 0.5);
其中,表示半透明度的0.5前面的0是可以省掉的,直接.5也是可以的。
兼容性:IE6、7、8不支持,IE9及以上版本和标准浏览器都支持
解决IE8浏览器不支持rgba的方法:background:rgba(0,0,0,0.5); filter: progid:DXImageTransform.Microsoft.gradient(startcolorstr=#7F000000,endcolorstr=#7F000000);
使用说明:设置颜色的不透明度,一般用于调整background-color、color、box-shadow等的不透明度。
css3的rgba
.demo{
padding: 25px;
background-color:#000000;/* IE6和部分IE7内核的浏览器(如QQ浏览器)下颜色被覆盖 */
background-color:rgba(0,0,0,0.2); /* IE6和部分IE7内核的浏览器(如QQ浏览器)会读懂,但解析为透明 */
}
.demo p{
color: #FFFFFF;
}
背景透明,文字也透明
在background-color中使用rgba,标准浏览器中,背景透明,文字不透明,展现如下:
那么使用rgba实现背景透明,文字不透明是可取的。
关于css设置背景透明度的方法是什么就分享到这里了,希望以上内容可以对大家有一定的帮助,可以学到更多知识。如果觉得文章不错,可以把它分享出去让更多的人看到。
html怎样调节背景透明度,css设置背景透明度的方法是什么相关推荐
- html+页面的背景透明,css设置背景透明 元素不透明
css设置背景透明 元素不透明 在做前端页面的时候,我们会遇到这样的情况,需要背景为半透明状态,但是层里面的内容不需要为透明的状态.有时候我们设置的时候会出现不管内容还是背景同时都成透明了,如何实现背 ...
- css设置背景透明度,css设置背景透明度 你需要学习了
css通过设置透明度可以得到遮罩效果,今天咪咪我就来给大家讲解一下css透明度的设置方法. 工具/材料 电脑 webstorm 操作方法 01 如图,打开webstorm,然后新建一个html界面,在 ...
- php设置背景为透明,css如何设置背景颜色透明?css设置背景颜色透明度的两种方法介绍...
在网页布局中有时为了网页的整体美观,可能需要将网页中的某些部分设置为背景颜色透明,那么如何设置背景颜色透明呢?本篇文章就来给大家介绍一下css设置背景颜色透明的方法. 在css中设置背景颜色透明的方法 ...
- css如何设置背景颜色透明?css设置背景颜色透明度的两种方法介绍
在网页布局中有时为了网页的整体美观,可能需要将网页中的某些部分设置为背景颜色透明,那么如何设置背景颜色透明呢?本篇文章就来给大家介绍一下css设置背景颜色透明的方法. 在css中设置背景颜色透明的方法 ...
- CSS设置背景透明效果
CSS设置背景透明效果 设置背景透明效果有两种方法: 使用opacity属性定义透明度,范围0-1,0表示完全透明,1表示不透明,优点:可以在背景图片以及背景颜色上使用.缺点:会把设置div及其子元素 ...
- php设置背景图片的代码,css设置背景图片如何实现?(代码实例)
本篇文章给大家带来的内容是关于css设置背景图片如何实现?(代码实例),有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助. 很多人提交表单时都喜欢用一个图片来作为提交按钮,大多数人可能用J ...
- background-position—CSS设置背景图片的位置
background-position :在 CSS 中通过 background-position 属性可以调整背景图片的位置.因为在默认情况下背景图片都是从设置了 background-posit ...
- css 设置背景图片模糊,内容不模糊
方案: 内容和图片分别置于一个div,通过css设置背景div模糊度,设置内容div绝对位置. <!DOCTYPE html><html lang="en"> ...
- html背景图片只显示一张图片,img只显示图片一部分 或 css设置背景图片只显示图片指定区域(示例代码)...
17:14 2016/3/22 img只显示图片一部分 或 css设置背景图片只显示图片指定区域 background-position: 100% 56%; 设置背景图片显示图片的哪个坐标区域,图片 ...
最新文章
- GitHub上的“金矿”(236个Python开源项目,涵盖了15个领域)
- 移动端placeholder不能垂直居中解决方案
- 2019年 第10届 蓝桥杯 Java B组 省赛真题详解及总结
- 淘宝商品数据库设计的一些经验
- Android之提示Unable to get provider com.google.android.gms.ads.MobileAdsInitProvider
- USACO 2006 Open, Problem. The Country Fair 动态规划
- python纵向制表符命令_Python中raw_input()中子命令的制表符完成
- 点击startup.bat启动tomcat出现乱码
- Nginx安全配置标准(for proxy)
- PyCharm错误解决办法:ModuleNotFoundError: No module named 'matplotlib'
- 清北第一套题(zhx)
- 玩qq游戏提示计算机内存不足,win10系统玩游戏提示“计算机内存不足”怎么办...
- android 屏幕orientation,关于屏幕旋转而orientation值不改变的问题
- Java实训——学生信息管理系统
- 天使轮,种子,A轮,B轮,C轮,Pre-IPO
- 计算机组成原理实验内存读数,计算机组成原理实验八内存系统实验(3页)-原创力文档...
- stm32控制半导体制冷器实现饮水机保温制冷功能
- ios 抓娃娃开发_可爱抓娃娃ios版_可爱抓娃娃手机版1.0.4 - 系统城
- Immutable 详解及 React 中实践 1
- 体验ANT DESIGN PRO V5--项目创建并安装umi气泡工作台