个人中心
gpt4 book ai didi

html - 背景颜色不会覆盖文本 div

转载 作者：行者123 更新时间：2023-11-28 04:27:10 29 4
gpt4 key购买 nike

我想为我的文本 div 使用透明的黑色背景色。但是当我将div中的background-color设置为黑色时，只覆盖了一小条。我也无法让它变得透明(它必须有点灰)。

这是我的代码:

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

最佳答案

假设您正在谈论 info div，

小 strip 问题:删除指定的 50px 高度。

透明度问题:您必须像这样使用 rgba 作为背景色:

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

关于html - 背景颜色不会覆盖文本 div，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/41912830/

29 4 0
文章推荐： javascript - 调用并停止具有一定时间间隔的休息服务
文章推荐： c++ - 如何正确退出使用 Boost Log 的程序？
文章推荐： javascript - 我应该将 React 中不使用此方法的方法转换为静态方法吗？
文章推荐： javascript - 防止重复函数 onchange 事件 jQuery
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com