Question

我想将徽标与国家/地区图片分隔开，并且它们之间没有背景（透明），以便您可以看到真实背景的顶部。

像这样：How it is right not ////// How i want it

如您在第一张图片中所见，它是带有完整红色背景的完整导航栏，我想将该国家的徽标分开，在中间保留透明空间，但它们保留红色背景

@import url('https://fonts.googleapis.com/css?family=Lato:400,700');
html, body {margin: 0; height: 100%; overflow: hidden}

*{
    margin: 0px 0px;
    color: white;
}

body {
    overflow-x: hidden;
    font-family: 'Lato', sans-serif;
    color: white;

}

body{
    margin: ;
    padding: ;
    font-family:'Lato', sans-serif;
 
}

body {
    background: url(negocio.jpg) no-repeat center center fixed;
    margin-top: 300px;
    -webkit-background-size:cover;
    -moz-background-size:cover;
    -o-background-size:cover;
    background-size: cover;
}
/*--------Navbar---------*/

.navbar{
    text-transform: uppercase;
    font-weight: 700;
    font-size: 1.1rem;
    letter-spacing: .1rem;
    margin: 0 10px;
    border-radius: 15px;
    -webkit-box-shadow: 4px 10px 37px 8px rgba(0,0,0,0.42);
    -moz-box-shadow: 4px 10px 37px 8px rgba(0,0,0,0.42);
    box-shadow: 4px 10px 37px 8px rgba(0,0,0,0.42);
    background-image: linear-gradient(to right, rgba(177,17,30,1) 0%, rgba(177,17,30,1) 100%);
}

.navbar-nav li{
    padding-right: .7rem;
}
.dropdown:hover > .dropdown-menu {
    display: block;
}
.dropdown > .dropdown-toggle:active {
    /*Without this, clicking will make it sticky*/
    pointer-events: none;
}

/*--------Font Color------------------*/
.navbar-dark .navbar-nav .nav-link{
    color: white;
    padding-top: .8rem;
}

/*Orange color when Mouse on it*/
.navbar-dark .navbar-nav .nav-link:hover{
    color: #fbef7c ;
}


/*------------------END navbar-------------------------*/

<body data-spy="scroll" data-target="#navbarResponsive">
    
<!--start Home Section-->
<div class="home">
    
<!--  Navigation  -->
    <nav class="navbar navbar-expand-lg navbar-dark bg-danger fixed-top">
        <a class="navbar-brand" href="#"><img id="colombia" src="img/logo.png" width="50px" height="50px" alt=""></a>
        <button class="navbar-toggler" type="button" data-toggle="collapse"
data-target="#navbarResponsive">
        <span class="navbar-toggler-icon"></span>
        </button>

        <div class="collapse navbar-collapse" id="navbarResponsive">
            <ul class="navbar-nav ml-auto">

                <div class="dropdown-divider"></div>

                <li class="nav-item dropdown">
                    <a class="nav-link dropwdown-toggle" href="#" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">KS Colombia |<img src="https://www.lifeder.com/wp-content/uploads/2017/04/bandera-colombia.jpg" width="50px" height="50px"></a>

            </ul>

        </div>

    </nav>

</div>

制作导航栏中间没有背景的两件事

0 个答案: