透明的白色背景答案

【问题标题】：Transparent white background透明的白色背景
【发布时间】：2014-08-21 17:29:07
【问题描述】：

您好，我想在我的 body 标签的一部分使用白色透明背景，但我尝试了一些 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;
}

我在这里编辑并包含了我的整个代码。

【问题讨论】：

你想要透明还是白色？
白色透明背景。
你的意思是半透明的吗？
透明意味着透明，白色是一种颜色。如果它是透明的，它就没有颜色。那么您想要白色背景还是透明背景？
Yes Curt 半透明。

标签： html css web

【解决方案1】：

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

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

最后的 0.5 为 alpha 通道，0 为透明，1 为不透明。

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

【讨论】：

错字，意思是 idName。感谢您的评论。
我想要这样的东西，我已经尝试过了，但它不适合我。 stackoverflow.com/questions/3969380/…
background-color 会比background 更可取我认为？

【解决方案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);
    }

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

【讨论】：

我希望“body class”的整个div有一个白色的半透明背景。
您的代码是由所见即所得编辑器创建的吗？现在你得到一个全白背景而不是透明背景？ "

HOME

"
"

首页

" 你应该创建 2 个不同的类，因为一个是透明的，第二个可能是白色的，因为它对透明度的引用是一种白色背景

HOME

首页