2017-01-28 6 views
0

私のテキスト区切りには透明な黒の背景色が必要です。しかし、divの背景色を黒に設定すると、小さな帯だけが覆われます。また、私はそれを透明にすることはできません(少し灰色がかっています)。背景色はテキスト区切りをカバーしません

これは私のコードです:

html { 
 
    min-height: 100%; 
 
} 
 

 
body { 
 
\t font-family: "Trebuchet MS", Helvetica, sans-serif; 
 
\t height: 100%; 
 
\t margin: 0px; 
 
\t overflow-y: scroll; 
 
\t background-attachment: fixed; 
 
\t margin-bottom: 950px; 
 
    background: 
 
\t \t \t \t url("jambeach.jpg") no-repeat, 
 
\t \t \t \t -webkit-linear-gradient(#404040 , #0d0d0d); /* For Safari 5.1 to 6.0 */ 
 
    background: 
 
\t \t \t \t url("jambeach.jpg") no-repeat, 
 
\t \t \t \t -o-linear-gradient(#404040, #0d0d0d); /* For Opera 11.1 to 12.0 */ 
 
    background: 
 
\t \t \t \t url("jambeach.jpg") no-repeat, 
 
\t \t \t \t -moz-linear-gradient(#404040, #0d0d0d); /* For Firefox 3.6 to 15 */ 
 
    background: 
 
\t \t \t \t url("jambeach.jpg") no-repeat, 
 
\t \t \t \t linear-gradient(#404040 , #0d0d0d); /* Standard syntax */ 
 
} 
 

 
ul { 
 
    list-style-type: none; 
 
    margin: 0; 
 
    padding-left: 20px; 
 
\t padding-right: 0px; 
 
    overflow: hidden; 
 
    background-color: #262626; 
 
} 
 

 
li { 
 
    float: left; 
 
} 
 

 
li a { 
 
    display: inline-block; 
 
    color: #b3b3b3; 
 
    text-align: center; 
 
    padding: 18px 20px; 
 
    text-decoration: none; 
 
} 
 

 
a:hover { 
 
\t color:white; 
 
} 
 

 
li img { 
 
\t padding-left: 0px; 
 
} 
 

 
.footer { 
 
    position: fixed; 
 
    right: 0; 
 
    bottom: 0; 
 
    left: 0; 
 
    padding: 7px; 
 
    background-color: #1a1a1a; 
 
    text-align: left; 
 
    color: #666666; 
 
    font-size: 12px; 
 
} 
 

 
.dropdown-content { 
 
    display: none; 
 
    position: absolute; 
 
    background-color: #262626; 
 
    min-width: 160px; 
 
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); 
 
} 
 

 
.dropdown-content a { 
 
    color: #bfbfbf; 
 
    padding: 12px 16px; 
 
    text-decoration: none; 
 
    display: block; 
 
    text-align: left; 
 
} 
 

 
.dropdown-content a:hover {background-color: #4d4d4d; 
 
\t \t \t \t \t \t \t color: white;} 
 

 
.dropdown:hover .dropdown-content { 
 
    display: block; 
 
} 
 

 
.info { 
 
\t color: white; 
 
\t position: relative; 
 
\t top: 150px; 
 
\t left: 390px; 
 
\t text-align: left; 
 
\t font-size: 18px; 
 
\t letter-spacing: 0px; 
 
\t line-height: 34px; 
 
\t word-spacing: 0px; 
 
    width: 750px; 
 
    height: 50px; \t 
 
\t font-family: "Trebuchet MS", Helvetica, sans-serif; 
 
\t background-color: black; 
 
\t background-size: cover; 
 
} 
 

 

 
.bobmarley { 
 
\t position: absolute; 
 
\t left: 20px; 
 
\t top: 150px; 
 
\t z-index: -1; 
 
\t margin: 0; 
 
} 
 

 
.snooplion { 
 
\t position: absolute; 
 
\t left: 20px; 
 
\t top: 460px; 
 
\t margin: 0; 
 
}
<!DOCTYPE html> 
 
<html> 
 
<head> 
 
\t <title> 
 
\t \t Reggae 
 
\t </title> 
 
\t <link href="https://fonts.googleapis.com/css?family=Roboto:300|Varela" rel="stylesheet"> 
 
\t <link rel="stylesheet" type="text/css" href="Reggae.css"> 
 
\t <link rel="icon" type="image/png" href="favicon-32x32.png" sizes="32x32" /> 
 
\t <link rel="icon" type="image/png" href="favicon-16x16.png" sizes="16x16" /> 
 
\t <meta charset="UTF-8"> 
 
</head> 
 

 
<body> 
 
<ul> 
 
    <li><a href="hiphop.html"><img src="hiphop.png" alt="HIPHOP" style="width:120px;height:18px;"></a></li> 
 
    <li class="dropdown"> 
 
    <a href="javascript:void(0)" class="dropbtn">History</a> 
 
    <div class="dropdown-content"> 
 
     <a href="Reggae.html">Reggae</a> 
 
     <a href="OldSchool.html">Old-School</a> 
 
     <a href="Modern.html">Modern</a> 
 
    </div> 
 
    </li> 
 
    <li class="dropdown"> 
 
    <a href="javascript:void(0)" class="dropbtn">Playlists</a> 
 
    <div class="dropdown-content"> 
 
     <a href="PlaylistReggae.html">Reggae Playlist</a> 
 
     <a href="PlaylistOldSchool.html">Old-School Playlist</a> 
 
     <a href="PlaylistModern.html">Modern Playlist</a> 
 
\t <a href="* Nog in te vullen *">Your Playlist ?</a> 
 
    </div> 
 
    </li> 
 
    <li><a href="about.html">About</a></li> 
 
    <li><a href="contact.html">Contact</a></li> 
 
</ul> 
 

 
<img class="bobmarley" src="bobmarley.jpg" alt="Reggae Legend" style="width:300px;height:300px;"> 
 
<img class="snooplion" src="snooplion.jpg" alt="Snooplion - Snoopdogg" style="width:300px;height:300px;"> 
 

 
<div class="info">Reggae has been at the forefront in the development of music for many years now. 
 
From Electronic Dance Music to Pop to Punk to Disco and several other music genres today, you can hear the influence 
 
of Reggae coming from their core. One genre of music in particular that is directly influenced from Reggae is Hip-Hop. 
 
Those familiar with Hip-Hop’s history know that the culture was started in the late 70’s in the Bronx, NYC. The founding 
 
fathers of the culture are Afrika Bambatta, Grandmaster Flash and DJ Kool Herc. DJ Kool Herc being a native of Kingston, 
 
Jamaica always credits his Jamaican roots for his early techniques and development of the culture. 
 
<br> 
 
<br> 
 
Reggae music’s traditions of dubbing out tracks and toasting on the microphone are a direct lead in to hip-hop’s sampling & 
 
emceeing (now known as rapping). In Jamaica, dubbing out a track was the same as making a instrumental remix of a original song. 
 
It would usually be the B-side of a Jamaican 7″ single with the original song being the A-side. It involves stripping away most 
 
of the instrumentation of the song, vocals and melody highlighting the heavy drums and bass line. This would allow for a artist 
 
to “toast” or chat live on top the beat in the same way a Hip-Hop emcee can freestyle over the instrumental of their favorite 
 
track. And well known Jamaican Dub architect Lee Scratch Perry created the idea of putting sound effects such as babies crying, 
 
gunshots, breaking glass, etc. into his dubs and tracks thus inventing sampling. So as you see, elements of Hip-Hop can be traced 
 
back to techniques that came from Jamaican studios years earlier.</div> 
 

 
<div class="footer">©Mats László & Betien Baziany inc.</div> 
 
</body> 
 
</html>

+1

テキストdiv要素は、あなたが話している:あなたはこのようなあなたの背景色のrgbaを使用する必要がありますか?関連するHTMLとCSSだけを投稿し、ページ全体のコードは投稿しないでください。 –

+0

'.info'から' height:50px; 'を削除してください –

答えて

0

あなたがinfoのdiv、

小ストリップ問題について話していると仮定すると:指定は50pxの高さを削除します。

透明性問題

.info { 
    background-color: rgba(0,0,0,0.7); <-- Change 0.7 according to what you want 
} 
+0

soooたくさんありがとう!出来た! – Mats

+0

うれしい私は助けることができます。あなたの問題を解決するのに役立つ場合は、これを正しい答えとしてマークし、上向きの矢印をクリックしてupvoteしてください。 –

関連する問題