仍在学习CSS的工作原理。目前,我正在努力使背景图像覆盖整个页眉,在顶部/右侧/左侧没有任何间隙
我尝试了其他几个选项,但似乎无法移动此图像
(即在html中添加,但我想将其与该文件分开。我也尝试过将边距设置为0)
<!--EXAMPLE1-->
.splash_img {
background-repeat:no-repeat;
background-position: center top;
display:block;
margin:0px auto;
}
<!--EXAMPLE2-->
.splash_img:{
background-image:url("Images/bakemock.jpg") no-repeat center;
background-size:100% 100%;
height:630px;
}
它继续停留在浏览器的右上角。目前这就是我所拥有的
<head>
<div class="splash_img">
<img src="Images/bakemock.jpg" alt="bake"/>
</div>
</head>
.splash_img:{
background-image:url("Images/bakemock.jpg") no-repeat center;
background-size:100% 100%;
height:630px;
}
这些行:
<head>
<div class="splash_img">
<img src="Images/bakemock.jpg" alt="bake"/>
</div>
</head>
无法工作。
不能在<head>
标记中放入<div>
、<img>
等html元素。您的构建器标记应该仅在<body>
内部。并且<body>
内部不能有<head>
标签
两种可能性
- 如果此部分位于
<body>
内部,并且不是指<body>
上方的<head>
,则将其更改为<header>
或类似的内容 - 如果此部分位于
<body>
之上,请删除其中的html元素,并在<body>
部分中放置<header>
标记
一个有效的HTML应该是这样的:
<!DOCTYPE html>
<html>
<head>
<title>Some title</title>
<!-- meta tags, js scripts, css styles etc -->
</head>
<body>
<!-- div tags, spans, imgs, etc are ok -->
<!-- but you cannot put a <head></head> tag here -->
</body>
</html>
同样重要的注意事项
不能放置background-image:
并指定多个背景图像src及其elt。如果您想指定更多的源,请使用background:
而不是
background: url("/Images/bakemock.jpg") no-repeat center;
最后一件事当然是浏览器给<html>
和<body>
标签的默认填充/边距,您应该覆盖它们:
html, body {
padding:0px;
margin:0px;
}
总结
此代码将为您工作
<!DOCTYPE html>
<html>
<head>
<title>Some title</title>
<style>
header {
background: url("/Images/bakemock.jpg") no-repeat center;
background-size: 100% 100%;
height: 630px;
}
html, body {
padding:0px;
margin:0px;
}
</style>
<!-- meta tags, js scripts, css styles etc -->
</head>
<body>
<!-- div tags, spans, imgs, etc are ok -->
<!-- but cannot put a <head></head> tag here -->
<header>
</header>
</body>
</html>
你也可以在这里看到:
JSFiddle
希望能有所帮助。如果您有任何问题,请告诉我。
您可以这样做:
HTML:
<div class="splash_img">
<img src="Images/bakemock.jpg" alt="bake"/>
</div>
CSS:
.splash_img {
background: url(Images/bakemock.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
或者您可以使用background
属性
<style>
/* basic reset */
* {margin: 0;padding: 0;}
.header {
background: url('Images/bakemock.jpg') no-repeat; /* you may also change the URL */
background-size: 100% 100%;
width: 100%;
display: inline-block;
height: 200px; /* you may also change this */
}
</style>
<header class="header"></header>
绝对没有空间和间隙