首页 前端知识 背景透明(opacity vs background)

背景透明(opacity vs background)

2024-01-28 12:01:17 前端知识 前端哥 975 717 我要收藏

最近在做项目的时候,遇到透明度的相关设置。

常用的背景透明设置可分为两种,分别是:

  • 一是给background设置透明度。
  • 二是利用opacity属性。

在跳了一些坑之后,本人更推荐给background设置透明度,为什么呢?

想一下,我们为什么会想要实现透明效果呢?

​ 大多情况都是父盒子设置了一个很美的或很酷的背景图片,而子盒子则想要实现一定的透明效果,从而营造一种很高尚的效果。类似于下面这种效果(图片是随便从网上找的,图片来源)。

为什么我推荐给background设置透明度,而不是使用opacity属性呢?

​ 因为background的透明度效果只应用于背景,而opacity属性却会影响子盒子内所有内容,最重要的是文字和图片颜色也会受到影响,这就很让人头大。

​ 如下图,项目中父盒子设置了一个很酷的背景图片,子盒子设置了透明效果。UI小哥哥给的设计里面用到了opacity属性,代码如下:

 在我设计整体架构的时候,并没有意识到什么不对,但是具体内容一放上去,就察觉到不对了。看下面的文字和图片,本来文字设置的颜色是白色,但是实际却有一种偏灰的效果;图片也有蒙了一层灰的效果,暗沉暗沉的。

 

 

查了很多资料,看到有些说用定位之类的解决,感觉很麻烦,没有找到适合的解决方法,只能先放弃了这个属性,愁~

​ 这里没办法用background解决,因为前面已经使用了这个属性,也设置了相应的透明度。

后续码代码的时候,突然灵光一现,把opacity设置的透明度与background透明度相乘,作为background新的透明度,就好了呀!!!

代码如下:

 效果就很好:

所以,为了不让子盒子的内容(文字、图片等)失去原本设计的颜色,尽量不要使用opacity属性。

至于具体具体透明度的设置:

​ rgba()中a代表透明度,和opacity属性一样,取值 0-1 之间,表示从 完全透明完全不透明 。

至于给背景和边框设置的linear-gradient线性渐变,后续会整理一篇博客。

若是想给背景设置一个图标,连带着一起设置透明度,这样的话要怎么做呢?这样其实也有两种实现方式:

  1. 直接给目标模块设置opacity属性,
  2. 给目标模块的背景设置透明属性,同时创建一个跟目标模块大小一样的模块,绝对浮动起来,然后opacity设置对应的透明度。将这个模块遮盖在目标模块上面,并设置z-index: -1;。

分别实现的效果如下:

总体来说,感觉没有什么区别,但是仔细看字体,“主要内容区1”字体受到透明度影响了,但“主要内容区2”没有,字体一多,对比就很明显了:

 这样就看出来了,所以推荐第2种方式,这样调节图片透明度的时候,不会影响到字体颜色,或是,我在内容区域增加图片。

 这样是不是更明显了。对于为啥要设置z-index: -1;,是因为浮动的层级比文档流要高,如果不降低它的层级,会使得logo盖住具体内容,如下:

 当然,如果你想要这种样式,就可以不设置z-index。

 代码如下:

<div class="main1">
    主要内容区1
</div>
<div class="main2">
    <div class="main2-bg"></div>
    主要内容区2
</div>

<style>
.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>

转载请注明出处或者链接地址:https://www.qianduange.cn//article/620.html
标签
评论
发布的文章
大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!