在没有显示的标头的背景图象

问题描述 投票：0回答：1

我刚刚开始测试一些技能的新文档。为了制作一个带有文字覆盖的英雄形象，其功能是号召性用语按钮，我的背景图像没有显示。

我知道它在那里，但它似乎被向上推。当我检查元素并将填充放到200px时，它显示但直接将代码放入文件中并不会将其显示出来。

//CSS

* {
margin: 0;
padding: 0;
box-sizing: border-box;
}

html {
color: #555;
font-family: 'Lato', 'Arial', sans-serif;
font-weight: 300;
font-size: 20px;
text-rendering: optimizeLegibility;
}

.row {
max-width: 1140px;
}

.header {
background: url(img/hero.jpg);
background-size: cover;
background-position:center;
}

.hero-text-box {
position: absolute;
width: 1140px;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}

h1 {
  margin: 0;  
}

//HTML

    <!DOCTYPE html>
<html lang="en">
<head>
    <link rel="stylesheet" type="text/css" href="vendors/css/normalize.css">
    <link rel="stylesheet" type="text/css" href="vendors/css/fluid-    grid.css">
    <link rel="stylesheet" type="text/css" href="resources/css/style.css">
    <link href='https://fonts.googleapis.com/css?family=Lato:400,100,300,300italic' rel='stylesheet' type='text/css'>
    <title>Test</title>
     </head>


    <body>
        <header>

            <div class="hero-text-box">
            <h1>Welcome to my site</h1>
            <a href="#">Call me</a>
            <a href="#">Show me more</a>

            </div>

        </header>

</body>



</html>

文件夹结构

+ index.htm
+ css
  + img
  + style.css
+ js
  + scripts.js
+ img
+ data
html css image background
1个回答
0
投票

将.header更改为header：

header {
  background: url(img/hero.jpg);
  background-size: cover;
  background-position: center;
}

缺少图像问题

改回img/hero.jpg。接下来你需要做的是关于hv。这是错误的。要么把它作为vh，也不支持，所以，更好地使用：

header {
    background-image: url(img/hero.jpg);
    background-size: cover;
    background-position:center;
    height: 100%;
    width: 100%;
    position: fixed;
}

预习

而translate正在影响：

  transform: translate(0%, -50%);

见输出：http://output.jsbin.com/furumogoxe

所以我用另一种方式对CSS做了一些改变：

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  color: #555;
  font-family: 'Lato', 'Arial', sans-serif;
  font-weight: 300;
  font-size: 20px;
  text-rendering: optimizeLegibility;
  height: 100%;
}

.row {
  max-width: 1140px;
}

header {
  background: url(img/hero.jpg);
  background-size: cover;
  background-position:center;
}

.hero-text-box {
  position: absolute;
  width: 1140px;
  max-width: 100%;
  text-align: center;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

h1 {
  margin: 0;  
}
<link href='https://fonts.googleapis.com/css?family=Lato:400,100,300,300italic' rel='stylesheet' type='text/css'>
<header>
  <div class="hero-text-box">
    <h1>Welcome to my site</h1>
    <a href="#">Call me</a>
    <a href="#">Show me more</a>
  </div>
</header>
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.