成都html5网站建设,免费网络电话免费30分钟,wordpress 会话已过期,设置网站标签最近在做项目的时候#xff0c;遇到透明度的相关设置。
常用的背景透明设置可分为两种#xff0c;分别是#xff1a;
一是给background设置透明度。二是利用opacity属性。
在跳了一些坑之后#xff0c;本人更推荐给background设置透明度#xff0c;为什么呢#xff1f;…最近在做项目的时候遇到透明度的相关设置。
常用的背景透明设置可分为两种分别是
一是给background设置透明度。二是利用opacity属性。
在跳了一些坑之后本人更推荐给background设置透明度为什么呢
想一下我们为什么会想要实现透明效果呢
大多情况都是父盒子设置了一个很美的或很酷的背景图片而子盒子则想要实现一定的透明效果从而营造一种很高尚的效果。类似于下面这种效果图片是随便从网上找的图片来源。 为什么我推荐给background设置透明度而不是使用opacity属性呢
因为background的透明度效果只应用于背景而opacity属性却会影响子盒子内所有内容最重要的是文字和图片颜色也会受到影响这就很让人头大。
如下图项目中父盒子设置了一个很酷的背景图片子盒子设置了透明效果。UI小哥哥给的设计里面用到了opacity属性代码如下 在我设计整体架构的时候并没有意识到什么不对但是具体内容一放上去就察觉到不对了。看下面的文字和图片本来文字设置的颜色是白色但是实际却有一种偏灰的效果图片也有蒙了一层灰的效果暗沉暗沉的。 查了很多资料看到有些说用定位之类的解决感觉很麻烦没有找到适合的解决方法只能先放弃了这个属性愁~
这里没办法用background解决因为前面已经使用了这个属性也设置了相应的透明度。
后续码代码的时候突然灵光一现把opacity设置的透明度与background透明度相乘作为background新的透明度就好了呀
代码如下 效果就很好 所以为了不让子盒子的内容文字、图片等失去原本设计的颜色尽量不要使用opacity属性。
至于具体具体透明度的设置
rgba()中a代表透明度和opacity属性一样取值 0-1 之间表示从 完全透明完全不透明 。
至于给背景和边框设置的linear-gradient线性渐变后续会整理一篇博客。
若是想给背景设置一个图标连带着一起设置透明度这样的话要怎么做呢这样其实也有两种实现方式
直接给目标模块设置opacity属性给目标模块的背景设置透明属性同时创建一个跟目标模块大小一样的模块绝对浮动起来然后opacity设置对应的透明度。将这个模块遮盖在目标模块上面并设置z-index: -1;。
分别实现的效果如下 总体来说感觉没有什么区别但是仔细看字体“主要内容区1”字体受到透明度影响了但“主要内容区2”没有字体一多对比就很明显了 这样就看出来了所以推荐第2种方式这样调节图片透明度的时候不会影响到字体颜色或是我在内容区域增加图片。 这样是不是更明显了。对于为啥要设置z-index: -1;是因为浮动的层级比文档流要高如果不降低它的层级会使得logo盖住具体内容如下 当然如果你想要这种样式就可以不设置z-index。 代码如下
div classmain1主要内容区1
/div
div classmain2div classmain2-bg/div主要内容区2
/divstyle
.main1, .main2, .main2-bg {width: 500px;height: 200px;
}
.main1 {background: rgba(255, 255, 255, 1) url(../assets/imags/background.jpg) center center no-repeat;opacity: 0.3;
}
.main2 {background: rgba(255, 255, 255, 0.3);position: relative;
}
.main2-bg {position:absolute;z-index: -1;background: rgba(255, 255, 255, 1) url(../assets/imags/background.jpg) center center no-repeat;opacity: 0.3;
}
/style
