radial-gradient实现凹陷背景透明

CSS布局技巧 -- 内凹圆角

圆角,相信每一个了解CSS属性的都知道,通过border-radius实现圆角(外凸圆角),但是如果需要实现内凹圆角怎么办呢?比如四角内凹的元素,比如如下所示这样的内凹圆角对于这种问题,很多人的反应都是采用CSS的伪类或者子元素的绝对定位来覆盖,但是这样做的后果就是被覆盖部分是不透明的.在不同样色的背景下,会出现非常突兀的覆盖元素,这样一来,视觉上将会非常难看,自适应行不强. 如果需要实现透明的效果,很多人又会说,切图!对,切图作为background-image是一个很好的解决方法.如果只能

css 背景透明文字(内容)不透明三种实现方法

好久没写博客了.以前还想着最少一个月抽空写几篇.结果没做到O(∩_∩)O~~.好吧.现在努力,继续坚持. 看着以前写的东西,感觉自己在逐渐成长. 先上图: 本文主要记录如上图一样的.文字或内容不透明,但背景有一个“透明蒙版”的效果. 平时一般用的方法有三种: ① 先创建一个透明度跟“透明蒙版”一样的1X1大小的透明png图片.然后采用填充背景图的方法(repeat),实现背景透明而不影响文字的透明性. 优点:感觉兼容性最好. 缺点:要多弄一张透明图片. 这个就不写样式了.比较简单. ②采用opa

背景透明文字不透明的最佳方法兼容IE(以背景黑色透明度0.5为例)

以背景黑色,透明度0.5举例为大家详细介绍下关于背景透明,文字不透明的最佳方法同时兼容IE,具体实现如下,感兴趣的朋友可以参考下哈希望对大家有所帮助以背景黑色,透明度0.5举例非IE:background:rgba(0,0,0,0.5); IE: filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#7f000000,endColorstr=#7f000000); IE: filter:progid:DXImageT

PIE使用阴影后的背景透明方法

使用PIE后,会发现如果有设置 box-shadow 时,当前 class 样式中设置 opacity 或者背景渐变透明都会无效了,其实也是有办法解决的 css3-container { filter:alpha(opacity=80); } #header-wrapper { height:35px; background: -webkit-gradient(linear,left top,left bottom,from(rgba(68,102,113,0.9)),to(rgba(46,74

CSS利用filter/opacity实现背景透明

先看看众所周知的解决方案如果我们想要一个半透明背景,有两种实现方式: 1.利用CSS和opacity属性 .opacity { filter:alpha(opacity=);/*IE浏览器*/ opacity: 0.5;/*非IE浏览器*/ } 2.建立一个24位PNG背景图片第一种利用opacity的问题除了需要通过麻烦的语法来兼容所有浏览器, 还有不单该元素自身背景透明了,它的子元素会继承opacity属性,也会透明. 所以里面所有的文字也是透明的,这一般不是想要的效果. 你可以做一些

【原】CSS实现背景透明，文字不透明，兼容所有浏览器

11.11是公司成立的日子,16岁啦,我呢3岁半,感谢公司给了这样一个平台,让我得以学习和成长,这里祝愿公司发展越来越好~ 进入主题,每年11月11号是光棍节,产生于校园,本来只是一流传于年轻人的娱乐性节日,以庆祝自己仍是单身一族为骄傲,而如今是各大商家以脱光为由打折促销的时期,成为了所谓的”购物节“,双11也算了,后面还要搞双12,不得不吐槽下. 于是呢,熬夜加班做了11.11的活动,在PC端遇到了透明背景和透明图片的问题,其实以前也遇到过,只是没有总结起来,就忘记了,这次又撞墙了,必须记录下

CSS实现背景透明，文字不透明（兼容各浏览器）

在 FF/Chrome 等较新的浏览器中可以使用css属性background- color的rgba轻松实现背景透明,而文字保持不透明.而IE6/7/8浏览器不支持rgba,只有使用IE的专属滤镜filter:Alpha来实现,但是这样写法会把文字也变为透明,因此只有在透明容器的子节点(文本节点除外)内设置position:relative才能不继承其父元素的透明滤镜,代码如下: #container{ background: #000000\9; filter:Alpha(opaci

CSS实现背景透明，文字不透明，兼容所有浏览器

11.11是公司成立的日子,16岁啦,我呢3岁半,感谢公司给了这样一个平台,让我得以学习和成长,这里祝愿公司发展越来越好~ 进入主题,每年11月11号是光棍节,产生于校园,本来只是一流传于年轻人的娱乐性节日,以庆祝自己仍是单身一族为骄傲,而如今是各大商家以脱光为由打折促销的时期,成为了所谓的"购物节",双11也算了,后面还要搞双12,不得不吐槽下. 于是呢,熬夜加班做了11.11的活动,在PC端遇到了透明背景和透明图片的问题,其实以前也遇到过,只是没有总结起来,就忘记了,这次又撞墙了,

VC++ CStatic控件背景透明且改变其文本时，文字重叠解决方法

最近在项目中将CStatic控件设置为背景透明且在一个定时器函数改变其文本,结果CStatic的文字重叠了.解决该问题的方案是:从CStatic类派生自己的静态文本控件. 其实设置背景透明,也就是在CStatic重画时,返回一个空刷子而已,所以改变文本并没有改变上次残留的背景,从而导致重叠现象. 为了解决这个问题,我们可以让父窗口重绘该区域,以下是我的解决方法: 1: 从CStatic继承一个类CStaticEx 2: 增加WM_CTLCOLOR消息反射(把很多事情留给父窗口窗口处理不是一件很好

用Photoshop处理图片使背景透明

用Photoshop处理图片使背景透明打开一张图片双击背景或者右键背景图层,新建一个图层, 选择魔棒工具,单击图片, 会自动选择颜色相近的范围按下键盘的delete键,就可以删除魔棒所选择的区域了. 如果还有一些不满意的小细节,可以使用放大镜工具放大图片,并将一些顽固的污点用橡皮擦擦除: 或者直接使用工具栏中的矩形选择工具或套索工具进行选定.选定后按下Delete键就可以将所选区域删去了.

android 自定义Dialog背景透明及显示位置设置

先贴一下显示效果图,仅作参考: 代码如下: 1.自定义Dialog public class SelectDialog extends AlertDialog{ public SelectDialog(Context context, int theme) { super(context, theme); } public SelectDialog(Context context) { super(context); } @Override protected void onCr

<select>在chrome浏览器下背景透明问题

在上篇文章<只用CSS美化选择框>运用了背景透明的技巧来美化选择框,但在chrome浏览器下遇到了跟ie.ff不一样的透明效果,下面重现一下: 在一个大的div(背景红色)内放置一个select元素(背景透明).在线查看(可在不同浏览器中查看效果) <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dt

canvas背景透明

var can=document.getElementById("canv"); c=can.getContext("2d"); c.globalAlpha=.5; globalAlpha 值0-1, 0透明,1不透明这个值是控制整个canvas的透明度的,但是你只要在代码里c.globalAlpha=1,即可起到背景透明的效果,而不影响你canvas里内容的透明度. 测试浏览器 chrome, Ios, Android 4.3 2015.02.12

CSS实现背景透明，文字不透明（各浏览器兼容）

/*CSS*/.waps{ background:url(07158.bmp) no-repeat top center fixed; width:1004px; text-align:center; line-height:28px; font-size:12px; font-family:Arial, Helvetica, sans-serif;}.con{ text-align:left; width:500px; height:400px; margin:0px auto; paddin

CSS让div背景透明

div背景透明样式: 样式代码: .alert{filter:alpha(opacity=100); /* IE */ -moz-opacity:1.0; /* Moz + FF */ opacity: 1.0; height:300px; width:500px; background:#ccc; left:50%; top:50%;margin-top:-150px;margin-left:-250px;position:absolute;z-index:99; text-align:cen

IE6 背景透明

IE6 背景透明第 1 种方法:定义一个样式,给某个div应用这个样式后,div的透明png背景图片自动透明了.(注意两处图片的路径写法不一样,本例中,icon_home.png图片与html文件在相同目录) <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">&l

用shader使图片背景透明

转自:http://blog.csdn.net/dawn_moon/article/details/8631783 好吧,终于抽时间写这篇文章了. 手头上有很多人物行走图,技能特效图等,但这些图都有个纯黑色背景,怎么样将内容显示出来,让背景透明呢?前段时间搞了一下,感谢群里的童鞋们,提供了思路和方法. 这里用shader处理了像素,使黑色背景透明,直接上代码 ShaderSprite.h #ifndef __TestShader__ShaderSprite__ #define __TestSha

让Flash背景透明兼容Firefox、IE 6和IE 7的代码

添加代码: <param name="wmode" value="transparent" > 到 <object>…</object> 之间意思是设置Flash背景透明.添加代码: wmode="transparent" 到 <embed>…</embed>之间,意思是使Flash背景在Firefox下透明…

C#控件背景透明的几种解决方案

已经很少做winform程序了,最新参与了一个小项目,遇到了控件背景透明的功能要求,特在此总结一下,供有需要的同行参考. 0.背景透明的概念和分类背景透明是啥意思呢,就是背景透明.哈哈,废话了.其实你想过没有,要求不一样,实现的难道和技术手段也不一样. 最基本的就是不显示控件自己的背景,那,那显示谁的背景? 背景透明后,透过去显示谁,也就是说后面的谁不透明,这是问题的关键,换句话说,透明控件的parent是一个还是多个. 1.简单的背景透明,parent是一个的情况 a.自然透明,如图labe

【转】cocos2d-x游戏开发(十四)用shader使图片背景透明

转自:http://blog.csdn.net/dawn_moon/article/details/8631783 好吧,终于抽时间写这篇文章了. 手头上有很多人物行走图,技能特效图等,但这些图都有个纯黑色背景,怎么样将内容显示出来,让背景透明呢?前段时间搞了一下,感谢群里的童鞋们,提供了思路和方法. 这里用shader处理了像素,使黑色背景透明,直接上代码 ShaderSprite.h #ifndef __TestShader__ShaderSprite__ #define __TestSha

CSS实现背景透明，文字不透明（各浏览器兼容） (转)

/*CSS*/ .waps{ background:url(07158.bmp) no-repeat top center fixed; width:1004px; text-align:center; line-height:28px; font-size:12px; font-family:Arial, Helvetica, sans-serif;} .con{ text-align:left; width:500px; height:400px; margin:0px auto; padd

radial-gradient实现凹陷背景透明

热门专题