html - 透明白色背景

标签 html css web

您好,我想在我的 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;
}

我在这里编辑并包含了我的全部代码。

最佳答案

要制作半透明背景,请使用 rgba(将 alpha 值添加到背景颜色)

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

最后的 0.5 是 alpha channel ,0 是透明的,1 是不透明的。

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

关于html - 透明白色背景,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/24505439/

相关文章:

html - 段落不使用左边距移动

php - htaccess 重定向到另一个目录

html - 在 Bootstrap 4 中垂直堆叠的列之间添加间距

html - IE6 两个 Div 在包装 div 中,当内容改变时,一个 div 拒绝改变宽度

css - highcharts 实体仪表 : bigger tick marks

css - 在固定大小的 div 中垂直对齐居中图像

python - Flask 教程 : Stylesheet does not work

html - 是否可以根据动态生成元素的类将 css 应用于元素?

javascript - 为什么这个函数不无限循环呢?

php - 如何通过点击按钮推送网页通知