Фоновый цвет не будет содержать текст div

95
10

Мне нужен прозрачный черный цвет фона для моего текстового div. Но когда я устанавливаю фоновый цвет в div на черный, покрывается только небольшая полоса. Также я не могу заставить его быть прозрачным (он должен быть немного серым).

Это мой код:

html {
min-height: 100%;
}

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

ul {
list-style-type: none;
margin: 0;
padding-left: 20px;
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 {
color:white;
}

li img {
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;
color: white;}

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

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

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

.snooplion {
position: absolute;
left: 20px;
top: 460px;
margin: 0;
}

<!DOCTYPE html>
<html>
<head>
<title>
Reggae
</title>
<link href="https://fonts.googleapis.com/css?family=Roboto:300|Varela" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="Reggae.css">
<link rel="icon" type="image/png" href="favicon-32x32.png" sizes="32x32" />
<link rel="icon" type="image/png" href="favicon-16x16.png" sizes="16x16" />
<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>
<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-Hops history know that the culture was started in the late 70s 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 musics traditions of dubbing out tracks and toasting on the microphone are a direct lead in to hip-hops 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>

спросил(а) 2017-01-28T20:43:00+03:00 3 года, 6 месяцев назад
1
Решение
109

Предполагая, что вы говорите об info div,

Small Strip Issue: Удалите указанную высоту 50px.

Проблема прозрачности: вам нужно будет использовать rgba для фонового цвета следующим образом:

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

ответил(а) 2017-01-28T20:51:00+03:00 3 года, 6 месяцев назад
Ваш ответ
Введите минимум 50 символов
Чтобы , пожалуйста,
Выберите тему жалобы:

Другая проблема