如果背景为纯色背景非图片

如果背景为纯色背景非图片,那么就用background:rgba(x,x,x,x)来让背景带有透明度

background:rgba(x,x,x,x)

四个x的值是指:
red红色;green绿色;blue蓝色;alpha透明度

rgb三个参数有正整数值和百分数值2两个取值范围
正整数值的取值范围为：0 - 255
百分数值的取值范围为：0.0% - 100.0%

而a取值范围在:0~1(数值越小,越透明)

HTML下的部分代码:

<body>
    <div class="纯色背景div"></div>
</body>

CSS下的部分代码:

.纯色背景div{
    background:rgba(0,0,0,.6);

如果背景为图片背景

如果背景为图片背景,那么我们就用opacity(x)来设置背景的透明度

opacity(x)

opacity(x)中的x,指的是alpha透明度
对,同样取值范围也在 0~1(数值越小,越透明)
css的opacity属性可以让很多元素都变透明,这里要让背景变透明而文字不变透明需要一点小技巧
试过的同学可能就会知道直接在div上设置opacity会让整个div内的内容包括文字都变透明.
那么我们要怎么才能只设置背景变透明文字不变呢?

我们只需要将背景取出来单独放个div再把这个div和原来的div重叠就好了.

HTML的部分代码块{

<body>
    <div class="背景"></div>
    <div class="其他内容">天马流星拳</div>
</body>

CSS的部分代码块{

.背景{
    background:url("我是背景图片.JPG") no-repeat;
    background-size: 100% 100%;
    height: 800px;
    position: absolute;
    opacity:0.6;
}

.其他内容{
    height: 800px;
    background-size: 100% 100%;
    color:white;
}

最后

最后上个opacity的实际代码和成果图吧
实际代码块:

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <style type="text/css">

        *{
            width: 100%;
            padding:0;
            margin: 0 auto;
            text-align: center;
        }

        .bg{
            height: 800px;
            background: url("123.jpg") no-repeat;
            background-size: 100% 100%;
            position: absolute;
            opacity:0.6;
        }

        .box{
            height: 800px;
            background-size: 100% 100%;
        }

        p{
            width: 300px;
            line-height: 50px;
            position:relative;
            top: 50%;
            font-size: 30px;
            background: yellow;
            color: #000000;
            font:bold 50px Verdana, Geneva, sans-serif;
        }
    </style>
</head>
<body>
<div class="bg"></div>
<div class="box">
    <p>天马流星拳</p>
</div>
</body>
</html>