html下拉框背景怎么设透明度,css怎么设置背景图片半透明 css设置图片作为背景的透明度...
图片作为CSS背景时,如何设置背景图片透明度,让背景图片半透明。纯色背景半透明比较容易,而图片相对属性要稍微复杂些,考虑浏览器兼容和浏览器版本。
方法一:直接编辑图片
直接将图片在图片编辑软件中(比如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
body{ font-size:16px}
.book,.book-a{ border:2px solid #333}
.book{ width:300px; height:100px; background:url(logo.gif)}
.book-a{ width:300px; height:100px;
filter:alpha(opacity=60);-moz-opacity:0.6;opacity:0.60; background:url(logo.gif)}
以上代码可直接拷贝下来,保存HTML后,浏览器测试看看效果。
4、效果截图
CSS滤镜实现半透明
5、说明
优点直接对设置背景图片的DIV对象设置半透明滤镜,非常方便。
缺点,对象内文字内容、边框均跟随实现半透明。
方法三:纯颜色半透明遮挡【CSS5强烈推荐】
此方法浏览器兼容性好,图片和内容都能很好分离实现背景图片半透明效果,而文字、边框等样式与内容不受影响。只是多了一层DIV,使用绝对定位样式来实现重叠层叠。
1、关键代码
1)、background:rgba(255,255,255,.4)
设置背景颜色值与透明度。前3个255为代表RGB黑色,.4代表透明度为40%
这个颜色值可以从PS软件获得。
这里不再介绍,PS软件获取颜色,根据以上演示图可简单获得【PS获取RGB数值】
2)、绝对定位
position:relative、position:absolute; left:0; top:0;
设置绝对定位让文字DIV放到背景DIV上。
3)、完整实例代码
背景图片透明度设置实例_CSS5
.btmbox{ width:300px; height:100px; background:url(logo.gif)}
.btmbox-b{ width:300px; height:100px; background:url(logo.gif); position:relative}
.btmbox-b .qb{ position:absolute; left:0; top:0; width:100%; height:100%;background:rgba(255,255,255,.4);}
.btmbox-b .qc{ position:absolute; left:0; top:0; width:100%; height:100%;background:rgba(255,255,255,.8);}
4)、图片背景截图
设置背景图片和文字层,用文字DIV背景纯色半透明实现遮挡后面背景图片实现图片半透明
作者:css5原创
html下拉框背景怎么设透明度,css怎么设置背景图片半透明 css设置图片作为背景的透明度...相关推荐
- QComboBox下拉框文字如何在字体变大之后自适应高度
一.简述 一般我们给QComboBox设置完字体之后,在显示上并没有什么问题如下图. a.正常状态 由于程序在最大化的时候,因为主窗口尺寸变大,需要整体改变所有控件的尺寸,文字的大小,所以在窗口最大化 ...
- struts html:select 默认选中,Struts2自动选择下拉框的值
在Struts2中,HTML下拉框可以通过标签呈现.要自动选择一个下拉框的默认值,只是声明值"属性标记,并设置相应的默认值. 这里创建一个Web工程:strut2autoselectdrop ...
- ABAP ALV(LVC)下拉框或者F4搜索帮助
先上结果图: 代码: REPORT ZDCH_09_TEST2. ******************************************************************* ...
- 使用Axure RP实现页面跳转、弹窗显示、单选按钮、下拉框以及图片插入
前言:Axure RP 能帮助网站需求设计者,快捷而简便的创建基于网站构架图的带注释页面示意图.操作流程图.以及交互设计,并可自动生成用于演示的网页文件和规格文件,以提供演示与开发. 最近使用到Axu ...
- 纯原生javascript下拉框表单美化实例教程
html的表单有很强大的功能,在web早期的时候,表单是页面向服务器发起通信的主要渠道.但有些表单元素的样式没办法通过添加css样式来达到满意的效果,而且不同的浏览器之间设置的样式还存在兼容问题,比如 ...
- javascript实现下拉框表单美化的详细实例教程
html的表单有很强大的功能,在web早期的时候,表单是页面向服务器发起通信的主要渠道.但有些表单元素的样式没办法通过添加css样式来达到满意的效果,而且不同的浏览器之间设置的样式还存在兼容问题,比如 ...
- 【解决方案】win7计算机屏保的下拉框中,无照片选项,不能设置自定义图片
手动增加计算机屏保 问题描述 解决方案 问题描述 发现在有的计算机中,想设置自定义的屏保照片时,在屏保下拉框中没有"照片的选项",导致无法选择本地照片作为屏保程序.即缺少如下标红选 ...
- bootstrap获取下拉框数据_bootstrap动态调用select下拉框的实现方法
bootstrap动态调用select下拉框的实例代码 html代码: 填报部门: JS代码: /*获取下拉菜单*/ function showSel(){ $.ajax({ "type&q ...
- Easyexcel生成excel并通过自定义注解实现下拉框以及动态下拉框(将数据库中的数据显示在excel下拉框中)
首先需要定义excel实体类 @Data @ColumnWidth(22) @HeadRowHeight(30) public class ExcelProductDTO {//动态下拉框,可以查询数 ...
- 微信小程序——自定义下拉框
微信小程序本身并没有自带的下拉框组件,我们可以通过view标签自定义一个下拉框.(仅供参考) 目录 文件目录 实现效果 实现逻辑 设置数据 设置默认选项 实现弹出下拉框 提供选项值 设置所选值 源码 ...
最新文章
- Geoderma:南土所梁玉婷组-施用粪肥土壤中抗生素抗性基因和金属抗性基因的共存机制...
- HBase学习之路 (九)HBase phoenix的使用
- 上云迁移-海量数据迁移解决方案
- 小白零基础怎么学习Java?不要慌
- 分类器构筑_为组织构筑基于区块链的未来做准备
- 【TDS学习文档5】IBM Directory schema的管理3——attributes
- JSP(二):JSP页面组成部分
- 很好的开源UI框架Chico UI
- BiLSTM+CRF命名实体识别:达观杯败走记(下篇)
- 怎么避免后台被搜索_【干货】一文读懂360搜索oCPC
- 数字图像处理,相位相关图像配准算法的C++实现
- 万字长文简单明了的介绍xxl-job以及quartz
- TeamViewer固定密码远程连接
- 公司计算机系统忘记用户密码怎么办,电脑开机密码忘记了怎么办,教您如何解决忘记电脑开机密码...
- 最全ASCII对应码表-键值
- idea的language level含义和module的language level自动跳到5
- BOSS战的设计与架构
- 统一认证:移动互联网时代的用户账号一站式管理平台
- Boolean 的用法及意思
- 小达人点读笔报电量低无法充电故障的处理