CSS：如何修复背景图像并创建文本框？

Question

我学习了几个月的 Web 开发，与此同时，我正在重新创建我的个人网站。它还可以帮助我练习到目前为止所学的知识。但是我遇到了一些我自己无法解决的问题。

到目前为止，我已经创建了一个主页和两个索引内容页面。但我无法修复背景图像。图像的比例在每一页上都会发生变化。这是我写的 CSS 代码：

html {
background-image: url("file:///C:/Users/Rumeysa/Documents/VS Code Projects/rumeysagelgi.com/resources/jpegs/8.jpg");
background-color: #cccccc; 
background-size: cover; 
}

此外，我将 h4 元素设置为包含文本内容的框。我想将文本框设置为适当的尺寸，并在文本长度超过框可以覆盖时使其滚动。这是当前代码：

h4 {
font-family: 'Amiri', serif;
font-size: small;
font-weight: normal;
background-color: whitesmoke;
text-align: justify;
line-height: 120%;
border: 10px groove rgb(239, 230, 250);
border-radius: 2%;
padding: 5px;
overflow: scroll;
}

我上传了一些屏幕截图以便更好地理解。我希望背景图像看起来像在主页上。我真的很感谢经验丰富的开发人员的帮助。谢谢。

Answer 1

由于background-size: cover; 属性，背景图像的尺寸正在发生变化。

background-size: cover

在不拉伸图像的情况下尽可能大地缩放图像。如果图像的比例与元素不同，则会将其垂直或水平裁剪，以便不留空白。

来源：MDN

把auto改成keep the original proportions。

现在，对于文本，将标题标签包裹在 div 中并添加以下 css：

div {
    white-space: nowrap; /*important - see reference*/
    width: /*add your width*/;
    height: /*add your height*/;
    overflow: auto;
}

h4 {
    overflow: inherit;
    /*no need to inherit white-space, it will be inherited automatically*/
}

为了使溢出生效，块级容器必须设置高度（高度或最大高度）或将空白设置为 nowrap。

来源：MDN