css实现单色或图片背景透明,而文字不透明的方法

115 阅读 0 评论 76 点赞

我是靠谱客的博主魁梧自行车，这篇文章主要介绍css实现单色或图片背景透明,而文字不透明的方法，现在分享给大家，希望可以做个参考。

一.单色背景
方法: 不使用opacity属性,而是使用rgba
例子:

复制代码

1
2
3
4
5
6
7
8
<style>
   .bg {
    background-color:rgba(0,0,0,0.4)
   }
</style>

<div class="bg">背景是透明度0.4的黑色，文字不透明</div>

效果:
在这里插入图片描述

二.图片做背景
方法1: 将图片跟文字设置成兄弟关系，对图片设置opacity属性，把文字设置成绝对定位，然后将其定位到图片上
例子:

复制代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<style>
   .bg-box {
     position:fixed;
     top: 0;
   }
   .bg {
    position:absolute; 
    background:url('图片地址') no-repeat;
    height:100px; width:400px; 
    opacity:0.4
   }
   .font-text {
    position:absolute; 
    height:100px; 
    width:400px;
   }
</style>

<div class="bg-box">
    <div class="bg"></div>
    <div class="font-text">背景是透明度0.4的图片，文字不透明</div>
</div>