解决父容器透明子容器不透明继承问题

2016-02-19 23:52 2 1 收藏

人生本是一个不断学习的过程,在这个过程中,图老师就是你们的好帮手,下面分享的解决父容器透明子容器不透明继承问题懂设计的网友们快点来了解吧!

【 tulaoshi.com - Web开发 】

当父容器设置了透明度的时候,子容器会继承父容器的性质,面对这个问题我们也不知道该说是bug还是说是大家对透明的理解方式问题。先不管css的标准认为怎样才是最合理的,当我们遇到不想要子容器也透明的时候如何去解决这样的问题。

(本文来源于图老师网站,更多请访问https://www.tulaoshi.com/webkaifa/)

针对IE,在子容器添加:

position:relative;

针对firefox等就只能使用png

(本文来源于图老师网站,更多请访问https://www.tulaoshi.com/webkaifa/)

background:url(images/boxBg.png);
/*以下只有ie识别*/
*background:#CCCCCC;

方法二:

简单描述一下,也是网上常见的方法。

构造三个容器

首先,让需要透明的容器和不透明容器保持兄弟关系。

然后,通过父容器控制大小让两个兄弟容器通过定位保持一个看似父子的排列方式。

方法二是规避了透明度的继承问题,并不是解决了透明度继承问题

来源:https://www.tulaoshi.com/n/20160219/1630775.html

延伸阅读
标签: PS PS教程
  我前两天产生这个想法的时候向人提到过,被斥之为痴心妄想 ,差点放弃! 如下图,我们要做的就是上面半透明的一层(大且复杂的一个水印)去掉,还原底图的原貌。(注:下面图层的运算实际上是RGB值的运算) 这好比我们从一个地方走到另外一个地方,需要返回,最安全可靠的方法就是沿原路走回去。先看看我们是怎么走过...
标签: PS PS基础
近日,有人问我:PS画笔里面,流量和不透明度的区别到底在哪里,这个问题挺有意思的,然后我到网上搜了一下,讲得五花八门,云里雾里的。有的讲得是很正确的,但太抽象了。今天,我就这个问题展开一下。 相关技巧教程推荐: Photoshop详细详细解析色彩模式和调色原理 Photoshop实例解析蒙版工具的使用技巧 Photoshop技巧教程:轻松掌握...
标签: PS PS基础
我收到过许多学习Photoshop用户问到的很多最普通的问题,其中的一个就是图层面板上不透明度和填充这两个选项究竟有什么不同? 难道它们不是做着同样的事情吗?这个问题问得好,因为在大多数情况下它们的功能的确是一样的。这两个选项都是控制当前图层的透明度。它们是控制当前被选中的这个图层能允许其下面的图层所显示的程度。通常情况下,要...
近日,有人问我:PS画笔里面,流量和不透明度的区别到底在哪里,这个问题挺有意思的,然后我到网上搜了一下,讲得五花八门,云里雾里的。有的讲得是很正确的,但太抽象了。今天,我就这个问题展开一下。   首先,我们看一幅图: 中间是百分百的不透明度和百分百的流量,左边是流量不变,不透明度减半,右边是不透明度不变,流量减半。 ...
标签: Web开发
css 解决覆盖父元素透明度 的效果 css兼容浏览器的透明度写法 1.{opacity:0.3;filter:alpha(opacity=30);} css是不能做到兼容覆盖透明度的 如果父元素设置了透明度,那么子元素是不能比父元素的透明度高,所以可以用以下办法实现类似效果 1.div id="bgttt" style="opacity:0.3;filter:alpha(opacity=30);position:absolute;left:0;top:0; ba...

经验教程

937

收藏

54
微博分享 QQ分享 QQ空间 手机页面 收藏网站 回到头部