コンテンツの後ろが透けない方法がわかりません

Question

質問内容：service-videoをposition:absoluteで背景画像の上に配置したいのですが、そうすると少し透けてしまいます。
これを防ぐ方法をご教授お願い致します。

<?php get_header(); ?>

<div class="top">
	<div class="top-background"></div>
    <nav>
        <ul class="nav-align">
            <li><a href="#"> 会社情報</a> </li>
            <li><a href="#feature"> 事業内容</a> </li>
            <li><a href="#product"> 制作事例</a> </li>
			<li><a href="#news"> 採用情報</a> </li>
			<li><a href="#news"> お知らせ</a> </li>
            <li><a href="#contact" class="header-contact"> NEVYコラム</a> </li>
		
        </ul>
	</nav>
	
	
	<h2 class="top-message">
		人に伝わる,<br>映像づくり
	</h2>
</div>

<section class="top-filter">
	<div class="top-filter-left">
		<img src="https://neby.co.jp/wp_nby_2020/wp-content/uploads/2020/12/philosophy.svg" alt="" style="width:35.0245vw; height:30vh;">
	</div>

	<div class="top-filter-right">
		<h2>人に伝わる、映像づくり</h2>
		<p>
			
			NEBYは創業以来、映像を中心に事業を作り上げてきました。
			<br>
			<br>
			スマートフォンの普及と共に、映像はとても身近なものになりました。
			<br>
			<br>
			第５世代移動通信システム（5G）の到来と共に、
			<br>
			<br>
			映像の世界はさらに広がりを見せようとしています
			<br>
			<br>
			<br>
			<br>
			どんなに技術が発展しても、
			<br>
			<br>
			どんなに手軽に映像が作れるようになったとしても、
			<br>
			<br>
			人を惹きつける映像でなければ意味がありません。
			<br>
			<br>
			<br>
			<br>
			それは人に等しく文字が書けても
			<br>
			<br>
			誰しも小説家に慣れないと同じように。
							
		</p>
	</div>
</section>

<section class="company-content">
	<div class="company-intro">
		<div class="company-intro-message">
			<h2>NEBYは映像を使って問題解決をする企業です</h2>
			<p>NEBYは創業以来、動画制作とライブ配信番組の制作をメインに事業を行って参りました。
				<br>
				
				映像によるコミュニケーションデザインを一括しておまかせいただけます。
				
			</p>

		</div>
		<div class="company-intro-link">
			<div class="president-message">
				<a href="">
					<h3>代表メッセージ</h3>
					<p>message</p>
					<div class="arrow-anime">
						<div class="arrow">

						</div>
					</div>
				</a>
			</div>
			<div class="company-border-left">

			</div>
			<div class="company-detail">
					<a href="">
						<h3>会社概要</h3>
						<p>company</p>
						<div class="arrow-anime">
							<div class="arrow">

							</div>
						</div>
					</a>
			</div>
			<div class="company-border-left"></div>
			<div class="company-history">
					<a href="">
						<h3>沿革</h3>
						<p>history</p>
						<div class="arrow-anime">
							<div class="arrow">

							</div>
						</div>
					</a>
			</div>
		</div>
	</div>


</section>

<section class="service">
	<div class="service-gradient">
		<div class="service-logo">
			<img src="https://neby.co.jp/wp_nby_2020/wp-content/uploads/2020/12/service_title.svg" alt="" style="width:25vw; height:18.9509vh;">
		</div>
	</div>

</section>

<div class="service-bottom">
	<div class="service-video">
		<div class="video-top">
			<p class="count">01</p>
			<p class="next-to-count">Movie</p>
		</div>

		<div class="video-content">
			<h2>動画制作事業</h2>
			<p>
				動画の制作を、企画構成・絵コンテ・キャスティング・ロケ調整・カメラマン派遣・編集・カラーグレーディング・モーショングラフィックスなど、全てワンストップでおまかせいただけます。
			</p>
		</div>

		<div class="video-button">

            <a class="hover" href="#">VIEW MORE</a>
			<div class="button-arrow"></div>
            
		</div>
	</div>
</div>

<!-- footer-menuから下をget_footer()に置き換える -->
<?php get_footer(); ?>




	<!-- pickup -->
	

	

```CSS
$black-color:#596166;

body{
    padding: 0;
    margin: 0;
    
    background: url(../img/top.jpg)center center / cover no-repeat fixed;
    font-family: 'Yu Mincho','serif';
}

.nav-align{
    display: flex;
    width: 40vw;
    margin-right: auto;
    margin-left: auto;
    li{
        margin-right: 0.5vw;
        width: 8vw;
        a{
            text-decoration: none;
            color: white;
        }
    }
}


header{
    background-color:transparent;
    position: fixed;
    width: 100%;
   
    z-index: 10;
   
}



.header-inner{
    display: flex;
    width: 90%;
    margin-left: auto;
    margin-right: auto;
    margin-top: 5vh;
}

.header-logo{
    margin-right: auto;
}

.header-right{
    margin-left: auto;
}

.header-right{
    a{
        color: white;
    }
}

ul{
    list-style: none;
}

.top{
    height: 100vh;
}
.top-message{
    margin-left: 13vw;
    font-size: 5vw;
    color: white;
}

.top-filter{
    padding-left: 13vw;
    display: flex;
    background-color: rgba(122, 137, 146, 0.863);
    filter: saturate(75%);
    padding-top: 10vh;

}

.top-filter-right{
    margin-left: 10vw;
    margin-top: 10vh;
    color: white;
    padding-bottom: 13vh;
}

.company-intro{
    margin: 5vh 0;
}

.company-intro-link{
    display: flex;
    width: 60vw;
    margin-right: auto;
    margin-left: auto;
}

.president-message,.company-detail,.company-history{
    margin: 0 5vw;
    
    width: 15vw;
    a{
        text-align: center;
        text-decoration: none;
        color: $black-color;
    }
}

.company-content{
    background-color: #ededed;
    border: 1vw #ededed solid;
}

.company-intro-message{
    text-align: center;
    h2{
        font-size: 2vw;
    }
    p{
        margin-bottom: 10vh;
    }
}
.arrow{
    width: 8vw;
    background-color: #596166;
    position: relative;
   margin-left: 1vw;
    margin-top: 6.2rem;
    height: 1px;
}

.arrow::after{
    content: '';
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 5px 0 0 10px;
    border-color: transparent transparent transparent gray;
    position: absolute;
    top: -400%;
    left: 100%;
}

.button-arrow{
    width: 5vw;
    background-color: #596166;
    position: relative;
   margin-left: 10vw;
    
    height: 1px;
}

.button-arrow::after{
    content: '';
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 5px 0 0 10px;
    border-color: transparent transparent transparent gray;
    position: absolute;
    top: -400%;
    left: 100%;
}

.company-border-left{
    border-left: 1px solid rgba(111, 121, 127, 0.3);
}

.service{
    background-color: white;
    height: 100vh;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    

    width: 100vw;
}

.service-gradient{
    background-color: white;
    background: url(../img/service-back.png);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    z-index: 3;
    height: 100vh;
    position: relative;
}

.service-logo{
    position: absolute;
    margin-top: 10vh;
    right: 10vw;
}

.service-bottom{
    background-color: white;
    height: 100vh;
    position: relative;
    padding-top: 10vh;
    border: 3px solid white;
}

.service-video{
    width: 25vw;
    box-shadow: 2px 2px 4px gray;
    height: 30vw;
    padding: 0 3vw;
    //top: -50vh;
    margin-left: 8vw;
    //position: absolute;
}

.video-top{
    display: flex;
    p{
        margin: 0;
    }
   .count{
       font-size: 3vw;
       color: $black-color;
   }
   .next-to-count{
    font-size: 1vw;
    padding-top: 1.5vw;
   }
   
}

.video-content{
    margin-bottom: 8vh;
}

.video-button{
    a{
    color: $black-color;
    padding: 1vw 4vw;
    border: 1px solid $black-color;
    background-color: white;
    text-decoration: none;
    }
}



.footer-inner{
    background-color: gray;
    padding-top: 10vh;
    padding-bottom: 10vh;
    padding-left: 15%;
    padding-right: 15%;
    background-color: #686c6e;
    z-index: 4;
    position: relative;
}

.footer-pagetop{
    padding-top: 1vh;
    display: flex;
    position: absolute;
    left: 10vw;
    top: 1vh;
}

.footer-top{
    display: flex;
    a{
        color: white;
        text-decoration: none;
    }
}

.footer-company{
    margin: 0 3vw;
}

.footer-logo-wrap,.footer-content,.footer-example,.footer-recruit,.footer-notice{
    @extend .footer-company;
}

.footer-logo{
    padding-top: 2vh;
}



.footer-hr{
    margin-top: 8vh;
    margin-bottom: 5vh;
    border-color: white;
}

.footer-bottom{
    display: flex;
}

.footer-left{
    width: 40%;
    display: flex;
    justify-content: flex-start;
    text-align: left;
}

.copyright {
    text-align: left;
    font-size: 1.2vw;
    display: block;
    transform: scale(0.8);
    margin-top: -1vh;
    margin-left: -0.1vw;
    color: white;
}

.footer-right{
    display: flex;
    margin-left: 15vw;
    a{
        margin-right: 2vw;
        font-size: 1vh;
    }
    svg{
        margin-top: -0.1vh;
    }
}

.footer-under-area-list{
    margin: 0;
    margin-top: -1vh;
}



.footer-left-arrow{
    a{
        position: relative;
    }
}


ここにC

Comments

[m.ts10806]

コードやエラーはマークダウンのcode機能を利用してご提示ください。
https://teratail.com/questions/238564

[m.ts10806]

あとPHPでしょうか。
提示された情報で再現できるかどうかは大事です。
WordPressならそう書き、テーマも提示してください。

[Lhankor_Mhy]

「背景画像」とはどれですか？　../img/top.jpgのことでしょうか？