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

Scales the image as large as possible without stretching the image. If the proportions of the image differ from the element, it is cropped either vertically or horizontally so that no empty space remains.

来源：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*/
}

In order for overflow to have an effect, the block-level container must have either a set height (height or max-height) or white-space set to nowrap.

来源：MDN

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

CSS: How can I fix the background image and also create a text box?

html

css

text

background-image