按下按鈕時如何使背景半可見？-有解無憂

當我單擊按鈕時，如何使螢屏的一半部分變黑，如圖所示：

按下按鈕時如何使背景半可見？

我做了這樣的移動導航，并指定背景顏色應該是白色：

.nav-links-row-mobile{
    display: none;
    top:0;
    position: absolute;
    left:0;
    list-style: none;
    background-color: #ffffff;
    margin: 0;
    padding: 50px;
    height: 100%;
}

 <div class="nav-links ">
                    
                    <ul class="nav-links-row-mobile">
                        <div class="nav-logo nav-logo-mobile">
                            <a href="index.html">
                            <h1>Brit</h1><span class="grey">lex</span>
                        </a>
                        </div>
                        <li><a href="#!">Home</a></li>
                        <li><a href="#!">Skills</a></li>
                        <li><a href="#!">About Us</a></li>
                        <li><a href="#!">Pricing</a></li>
                        <li><a href="#!">Contacts</a></li>
                    </ul>
                </div>

但是我怎樣才能使螢屏的第二半部分變成一半黑色或部分可見？

先感謝您！

uj5u.com熱心網友回復：

試著給它一個box-shadow零blur，一個非常大的spread，rgba()用來使陰影顏色透明。

body {
  width: 100%;
  height: 100%;
  background: url(https://www.fillmurray.com/800/600) no-repeat center center fixed;
  background-size: cover;
}

.nav-links-row-mobile{
  top:0;
  position: absolute;
  left:0;
  list-style: none;
  background: #ffffff;
  margin: 0;
  padding: 50px;
  height: 100%;
  box-shadow: 0 0 0px 5000px rgba(0,0,0,0.5);
}

<body>
<div class="nav-links">    
    <ul class="nav-links-row-mobile">
        <div class="nav-logo nav-logo-mobile">
            <a href="index.html">
            <h1>Brit</h1><span class="grey">lex</span>
        </a>
        </div>
        <li><a href="#!">Home</a></li>
        <li><a href="#!">Skills</a></li>
        <li><a href="#!">About Us</a></li>
        <li><a href="#!">Pricing</a></li>
        <li><a href="#!">Contacts</a></li>
    </ul>
</div>
</body>

轉載請註明出處，本文鏈接：https://www.uj5u.com/gongcheng/462491.html

標籤：javascript html css

上一篇：在播放器中添加隨機播放曲目的按鈕

下一篇：洗掉所有物件中的屬性及其值