代码之家 › 专栏 › 技术社区 › Bobosky

在css中调整窗口高度时,是否有任何方法来保持宽度?

css

Bobosky · 技术社区 · 3 年前

从技术上讲,我在一家公司的网站上看到过一个设计,允许他们设置背景图像,在调整高度的同时设置固定的宽度。我该怎么做?当我试图设置标题的背景并调整窗口的高度时,背景图像的大小(宽度、高度)也得到了调整。我对此一无所知。下面是我的css代码

header {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;

    height: 500px;

    background-image: linear-gradient(315deg, rgba(17, 48, 247, 0.59), rgba(50, 183, 240, 0.41) 49%, rgba(83, 45, 233, 0.38)), url(https://cdn.discordapp.com/attachments/527505181039132677/977568384722034759/unknown.png);
    background-position: 50%, 25%;
    background-size: auto, cover;
    background-repeat: repeat no-repeat;
    background-attachment: scroll, fixed;
    width: 100%;
}

1 回复 | 直到 3 年前

Gabriel Nuñez de Andrade 3 年前

从中删除逗号 background-size ,仅在处理多个背景时使用逗号

 header {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;

  height: 500px;

  background-image: linear-gradient(
      315deg,
      rgba(17, 48, 247, 0.59),
      rgba(50, 183, 240, 0.41) 49%,
      rgba(83, 45, 233, 0.38)
    ),
    url(https://cdn.discordapp.com/attachments/527505181039132677/977568384722034759/unknown.png);
  background-position: 50%, 25%;
  background-size: auto cover;
  background-repeat: repeat no-repeat;
  background-attachment: scroll, fixed;
  width: 100%;
}

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Static Template</title>
  </head>
  <header></header>
</html>