Question

嗨我想在我的身体标签的一部分有一个白色的透明背景，但我尝试了一些CSS但它仍然无法正常工作。它甚至没有填充白色背景。

这是我的HTML

<!DOCTYPE html>
    <head>
         <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="" />
    <meta name="author" content="" />
        <title>Guitar Corner</title>

        <link href="C:/Users/Jhan Jericho/Desktop/bootstrap/css/bootstrap.css" rel="stylesheet" />

         <script src="C:/Users/Jhan Jericho/Desktop/bootstrap/css/bootstrap.css"></script>
         <script src="C:/Users/Jhan Jericho/Desktop/bootstrap/jquery-1.7.1.intellisense.js"></script>
         <script src="C:/Users/Jhan Jericho/Desktop/bootstrap/js/bootstrap.js"></script>
    </head>
        <body>
            <div class="container">
                <div style="position:fixed; top:0; left:0; width:100%; height:100%;">
                    <img src="bg2.jpg" alt="logo"/>
                </div>
                <div class="center-block">
                    <div class="col-md-12" style="background-image:url('guitar.png');  background-size: 1200px 350px; background-repeat:no-repeat; shadow: 10px 0px 20px;"> 
                        <br>
                        <br>
                        <br>
                        <br>
                        <br>
                        <br>
                        <div class="col-lg-3">
                                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<img src="GC.png" style="-webkit-filter: drop-shadow(5px 5px 5px #222);"/>
                        </div>
                        <div class=".col-xs-12 .col-md-8"><i>
                                <font face="Bebas Neue" color="white" size="150"><br />
                                    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;"We are attached by strings."
                                        &nbsp;</i>
                                </font>
                                <br>
                                <br>
                                <br>
                                <br>
                                <br>
                        </div>
                    </div>
                </div>
                <div id="bodycolor">
                    <div class="col-md-12" id="bartonav"><font color="white">
                        <h1>HOME</h1>
                    </div>
                    <div class="bodycolor">
                    <div class="col-md-3">
                        <br />
                        <ul class="nav nav-pills nav-stacked">
                            <li><a href="#">HOME</a></li>
                            <li><a href="#">PROFILE</a></li>
                            <li><a href="#">ABOUT US</a></li>
                            <li><a href="#">CONTACT US</a></li>
                        </ul>
                    </div>
                    </div>
                </div>
            </div>
        </div>
    </body>
</html>

我的CSS：

.bodycolor
{
 background-color: white;
}

我已在此编辑并包含了我的全部代码。

Answer 1

要制作半透明背景，请使用rgba（将alpha值添加到背景颜色）

#idName
{
    background-color:rgba(255,255,255,0.5);
}

最后的0.5是alpha通道，0表示透明，1表示不透明。

这是一个显示透明度的JSFiddle：JSFiddle

Answer 2

    <div class="bodycolor">
                    <div class="col-md-12" id="bartonav"><font color="white">
                        <h1>HOME</h1>
                    </div>
                    <div class="transparent">
                    <div class="col-md-3">
                        <br />
                        <ul class="nav nav-pills nav-stacked">
                            <li><a href="#">HOME</a></li>
                            <li><a href="#">PROFILE</a></li>
                            <li><a href="#">ABOUT US</a></li>
                            <li><a href="#">CONTACT US</a></li>
                        </ul>
                    </div>
                    </div>
                </div>
CSS
    .bodycolor
    {
     background-color: #FFF; /*general background color*/
    }
    .transparent
    {
     background-color:rgba(255,255,255,0.5);
    }

这样的东西？小心，你使用同一个班级两次，这两个部分将具有相同的背景

透明的白色背景

2 个答案: