您现在的位置是：首页 > 网络趣梗网络趣梗

html中图片背景的透明度如何设计(HTML设置图片透明度)

2022-09-15 13:17:54网络趣梗0人已围观

简介　　html中图片背景的透明度如何设计(HTML设置图片透明度)，新营销网红网本栏目通过数据整理汇集了html中图片背景的透明度如何设计(HTML设置图片透明度)相关信息，下面一起看看

　　html中图片背景的透明度如何设计(HTML设置图片透明度)，新营销网红网本栏目通过数据整理汇集了html中图片背景的透明度如何设计(HTML设置图片透明度)相关信息，下面一起看看。

　　我们在做PC端项目的时候，经常会遇到背景透明，图片透明的要求，但是透明度往往会出现很多问题，尤其是背景内容不透明，要兼容所有浏览器很麻烦。

　　如何让背景透明，文字不透明，兼容所有浏览器？其实透明度调整其实就是样式中的不透明度调整，如下图所示：

　　 Ps，在图层面板上，可以看到设置-图层调整不透明度的菜单，从0%(完全透明)到100%(不透明)

　　通常有三种方法来实现透明的css样式。以下是用50%不透明度来写它们的方法。

　　 opacity: 0.5css3的值从0到1，如opacity: 0.5css3的rgba(红、绿、蓝、alpha)，alpha(透明度)从0到1，如rgba(255，255，255，0.5)IE exclusive filter filter3360alpha(不透明度=值)，取值范围从0到100，如filter 3360 alpha(不透明度=50)。下面我们来一一解释一下：1。Css3的不透明兼容性：Css3的不透明性与IE的较低版本不兼容，IE6/7/8不支持，IE9以上全部支持。

　　不透明度应用：在设置不透明度的元素时，不仅设置的元素是透明的，而且后代元素也会继承不透明度，也具有透明的效果，所以不透明度一般用于调整个别图片或者某些模块的透明度。

　　 !DOCTYPE html html lang= en head meta charset= UTF-8 标题文档/标题样式* { padding:0margin : 0；}.内容{ width: 200pxheight: 100pxpadding: 50px 50px背景色：红色；opacity: 0.5/*将不透明度设置为50% */} p { width : 100px；height: 100px背景：绿色；} /style /head body div p背景是透明的，内容也是。/p/div/body/html使用不透明度后，整个模块是透明的，如下图：

　　那么就不能用不透明(背景透明，文字不透明)来实现。

　　 2.css3的rgba兼容性：IE6、7、8不支持，IE9及以上版本和标准浏览器支持。

　　说明：设置颜色的透明度，只要是用来设置颜色的。

　　 !DOCTYPE html html lang= en head meta charset= UTF-8 标题文档/标题样式* { padding:0margin : 0；}.内容{ width: 200pxheight: 100pxpadding: 50px 50px背景色： rgba(255，0，0，0.5)；/*用rgba设置背景透明度，内容不受影响*/} p { width : 100px；height: 100px背景：绿色；}/style/head body div p背景透明，内容透明。p /div /body /html

　　我们想要的效果

　　错误显示IE，7，8rgba

　　所以rgba可以设置想要的效果，但是有兼容性。在IE6，7，8中设置rgba会显示不正确，无法识别，但是有IE专属滤镜filter:Alpha(不透明度=x)，大家可以一起看看。3.IE独占滤镜filter3360alpha (opacity=x)使用说明：IE浏览器独占，问题很多。本文以设置背景透明度为例，如下：仅支持IE6、7、8、9，在IE10版本的IE6、7中取消。需要激活IE的haslayout属性(如：*zoom:1或* Overflow 3360Hidden)使其读取filter3360alpha。IE6、7、8中设置了filter3360alpha的元素，父元素设置为position:static(默认属性)，其子元素相对定位，可以让子元素不透明！DOCTYPE html html lang= en head meta charset= UTF-8 标题文档/标题样式* { padding:0margin : 0；}.内容{ width: 200pxheight: 100pxpadding: 50px 50px背景色：红色；滤镜：Alpha(不透明度=50)；/*仅支持IE6，7，8，9 */position : static；/* IE6、7、8只能设置position:static(默认属性)，否则会导致子元素继承Alpha值*/*/* zoom :1；/*激活IE6和7的haslayout属性，使其读作Alpha */} p { width : 100px；height: 100px背景：绿色；位置：相对；}/style/head body div p背景透明，内容透明。p /div /body /html

　　 IE6，7，8可以识别过滤器过滤器

　　 IE10版本被废止，IE10及以上不被承认。

　　 4.完全透明和兼容的解决方案。从上面的分析我们知道，透明背景内容是不透明的，可用的属性是rgba和IE的专属滤镜，filter:Alpha。

　　对于IE6、7、8浏览器，我们可以使用fiter filter，对于标准浏览器，我们使用rgba。那么问题来了。IE9浏览器的两种属性都支持，一起使用会反复降低不透明度。那么，如何将fiter:Alpha只用于IE6、7、8呢？我们可以通过CssHack找到只支持IE 6、7、8的解决方案，里面有IE相关的Hack。

　　 /*仅IE6，7，8 */@媒体屏幕，屏幕9 {.}透明度。所有问题都已解决，所有代码如下：

　　！DOCTYPE html html lang= en head meta charset= UTF-8 标题文档/标题样式* { padding:0margin : 0；}.内容{ width: 200pxheight: 100pxpadding: 50px 50px背景色： rgba(255，0，0，0.5)；} p { width: 100pxheight: 100px背景：绿色；}@media screen，screen9 {/*仅支持IE6，7，8 */。内容{ background-color : red；滤镜：Alpha(不透明度=50)；位置：静态；/* IE6、7、8只能设置position:static(默认属性)，否则会导致子元素继承Alpha值*/*/* zoom :1；/*激活IE6和7的haslayout属性，使其读取alpha */}。内容p { Position:Relative/*将子元素设置为相对定位，这样子元素不会继承Alpha值*/} }/style/head body div p背景是透明的，内容也是透明的。/p/div/body/html相关文章粤语歌网(经典粤语歌汇总)

　　北京奥特莱斯(来北京必去的12家商场)

　　英雄超级放肆(还记得英雄超级放肆吗？)

　　龚自珍资料(清代诗人龚自珍生平事迹简介)

　　象牙塔是什么意思？(“象牙塔”有什么不好？)

　　彩色风信子(水培风信子容易养)

　　京字怎么读？

　　于吉是哪里人？(古代著名美女于吉在哪里？)

　　三本事业单位(我们还有哪些“三本”？)

　　电子酒柜(酒柜最全指南)

　　德州景点(德州62个景点)

　　玉兰油官网(玉兰油发布高端精华系列)

　　更多html中图片背景的透明度如何设计(HTML设置图片透明度)相关信息请关注本文章，本文仅仅做为展示！