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

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

css
  •  0
  • 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 年前
        1
  •  0
  •   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>