Question

＆＃34; main＆＃34;的背景主页的一部分（标记为红色），应该是黑色但由于图像，它是无法看到的。这是我的代码：

body {
    color: white;
    font-family: futura;
    background-color: black;
    font-size: 15px;
    max-width: 700px;
    margin-left: auto;
    margin-right: auto;
    background: url(Website_Bilder/background.png) 
    no-repeat center center fixed;
    -moz-background-size: cover;
    background-size: cover;
}

head {
    font-size: 30px;
    display: block;
    position:relative;
    background-position: center;
    background-size: cover;
    background-attachment: fixed;
    text-align: center; 
}

section {
    font-size: 15px solid #a0a0a0;
    border: 50px;
    padding: 0%;
    clear: ;
    margin: 1em auto;
}

ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: #333;
}

li {
    float: left;
}

li a {
    display: block;
    color: white;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
}

/* link color */
li a:hover {
    background-color: #111;
}

img {
    width: 100%;
    float: center;
    height: auto;
    max-width:100%;
    display: block;
    margin: 1em auto;

    left:0px;
    top:100px;
    z-index:-1; 
}

p { 
    padding 10px 20px 10px 20px;
    margin 20px;
}

这就是我得到的：

/我制作了更好的截图并添加了更多代码

Answer 1

如果我理解你：你希望你的红色边框区域有黑色背景而不是CSS体选择器中定义为背景的图像？然后你只需要为这个区域周围的html标签定义一个新的CSS类/ id，如下所示：

html, body {
	height: 100%;
	width: 100%;
}

body {
    color: white;
    font-family: futura;
    background-color: black;
    font-size: 15px;
    max-width: 700px;
    margin-left: auto;
    margin-right: auto;
    background: url(http://tub.tubgit.com/reimg/resize-img.php?src=http://photos.up-wallpaper.com/images251/jdicnfzws24.jpg&h=1080&w=1920) 
    no-repeat center center fixed;
    -moz-background-size: cover;
    background-size: cover;
}

div.redArea {
	min-width: 70%;
	height: 100%;
	background-color: black;
	text-align: center;
}

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <link href="style.css" type="text/css" rel="stylesheet">
</head>
<body>
	<div class="redArea">
		<p>this is a test</p>
	</div>
</body>
</html>

redArea类的宽度必须定义为min-width，因为您已将主体选择器的max-width设置为700px。

在背景图像之前，我需要身体的背景颜色

1 个答案: