Question

在我的标题中，我试图让我的背景图像覆盖我的完整标题，但我正在做的事情似乎正在修复它。

.header {
  background-image: url("https://iso.500px.com/wp-content/uploads/2015/12/stock-photo-125301449-1500x822.jpg");
  background-postion: center center;
  background-size: cover;
  height: 100%;
  width: 100%;
}

<div class="header">
  <div id="header-text">
    <h1>Olivia Cahill</h1>
    <h2>A Collection of Her Art</h2>   
  </div>
</div>

编辑：当我说封面时，我的意思是我希望页面的整个第一部分都有图像

Answer 1

body
{
margin: 0px !important;
padding: 0px !important;
}
header
{
background-image: url("https://iso.500px.com/wp-content/uploads/2015/12/stock-photo-125301449-1500x822.jpg");
background-postion: center center;
background-position-y: 30%;
overflow: hidden;
height: 200px;
width: 100%;
text-align: center;
}

header h1 {
color: #F0477F;
font-family: "Roboto", sans-serif;
font-size: 1.999em;
font-weight: 400;
}

header h2 {

color: #F0477F;
font-family: "Roboto", sans-serif;
font-size: 1.414em;
font-weight: 400;

}

<header>
        <h1>Olivia Cahill</h1>
        <h2>A Collection of Her Art</h2>
</header>

Answer 2

虽然它有点摒弃宽高比，但这似乎是你可能正在寻找的东西：

＆＃13;

.header {
  background-image: url("https://iso.500px.com/wp-content/uploads/2015/12/stock-photo-125301449-1500x822.jpg");
  background-postion: center center;
  background-size: 100% 100%;
  height: 100%;
  width: 100%;
}

＆＃13;

<div class="header">
  <div id="header-text">
    <h1>Olivia Cahill</h1>
    <h2>A Collection of Her Art</h2>   
  </div>
</div>

＆＃13;

这是 CSS3 的背景大小调整表达式。通过指定100％两次我们基本上说我们想要：100％（宽度）x 100％（高度）。

覆盖完整标题与背景图像

2 个答案: