Question

我有一个PSD格式的设计，我正在将其转换为HTML / CSS。我想在后面的地面设置一个大图像，它也出现在标题后面。谁能告诉我怎么能这样做？

Answer 1

以下是一个例子：

body {
  background: url("https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQxC6tuHBQvtvENnQRI-7iRaEfqigj-cuacu1IeYYXBmYD1J9VrJQ");
  
  background-size: cover;
  background-repeat: no-repeat;
}

h1{
color: #fff;
font-size: 30px;
text-align: center;
}

<body>

  <div class="header">

    <h1>Header</h1>

  </div>

</body>

Answer 2

如果仅在<header>中，则需要添加以下CSS代码。

header {
  background-image: url('path-to-image');
  background-position: relative; /* This depends on your preferences */
  background-size: cover;
}

如果您在<img>

中添加<header>，也可以这样做

header img {
  position: relative;
  width: 100%;
  height: auto; /* or height: 100vh */
}

如何设置大背景图像

2 个答案: