Question

需要帮助设置页眉大小，以便容纳图像和文本。

我尝试使用“ background-size”属性更改背景大小，但没有改变。

header {
  background-color: red;
  background-size: 200px 100px;
}

header h1 {
  font-size: 50px;
  text-align: center;
  text-decoration-line: underline overline;
  text-decoration-style: double;
  position: relative;
  margin-top: -100px;
  margin-bottom: 100px;
}

header .pic {
  border: 5px #000 outset;
  border-radius: 50px;
}

<header>
  <img class="pic" src="" alt="" width="200px">
  <h1>Placeholder Text</h1>
</header>

当我希望标题背景位于文本和图像的底部（以较低者为准）时，标题背景会一直显示到文本和图像的中间。

Answer 1

尝试一下：

header {
    background: url("img/index.jpg") ;
    background-color: red;
    background-size: 200px 100px;
}

header h1 {
    font-size: 50px;
    text-align: center;
    text-decoration-line: underline overline;
    text-decoration-style: double;
    position: relative;
    margin-top: -100px;
    margin-bottom: 100px;
}

header .pic {
    border: 5px #000000 outset;
    border-radius: 50px;
}

<header>
<h1>Placeholder Text</h1>
</header>

Answer 2

要在容器中放置背景图像时，请执行以下操作：

header {
 background-image: url('https://picsum.photos/800/400');
 background-size: cover;
 background-repeat: no-repeat;
 height:100vh;
 width: 100vw;
}

h1 {
 color: black;
 font-size: 50px;
 text-align: center;
}

您可以在CSS中声明背景图片，而不是使用常规的图片标签。

在此处查看有效的示例：https://codepen.io/Angel-SG/pen/dwOEvy

Answer 3

我认为您可能正在寻找display: flex

尝试一下

/* Reset 
*******************/
* { margin: 0; padding: 0; box-sizing: border-box; }
img { max-width: 100%; }

/* Styles 
*******************/
header { background-color: red; display: flex; align-items: center; justify-content: space-between; padding: 1rem; }
header .pic { width: 200px; }
header h1 {
    font-size: 50px;
    text-align: center;
    text-decoration-line: underline overline;
    text-decoration-style: double;
    position: relative;
}

<header>
    <img class="pic" src="https://sg.fiverrcdn.com/photos/105746482/original/3e2a4ad867ed23117cfda223391c35ab42bb99fc.png">
    <h1>Placeholder Text</h1>
</header>

如何设置标题背景以适合

3 个答案: