Question

对于我的文字div，我喜欢透明的黑色背景色。但是当我将div中的背景颜色设置为黑色时，只覆盖了一个小条带。我也不能让它变得透明（它必须有点灰色）。

这是我的代码：

＆＃13;

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;
}

＆＃13;

<!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-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>

＆＃13;

Answer 1

假设您正在谈论info div，

小条带问题：删除指定的50px高度。

透明度问题：您必须使用rgba作为背景颜色，如下所示：

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

背景颜色不会覆盖文本div

1 个答案: