时间戳

首页 > 解决方案 > 动态可调整大小的背景图像

javascript - 动态可调整大小的背景图像

问题描述

我试图在调整大小时使背景图像粘在页脚上。随意在编辑器中使用我的代码并替换照片以供参考。我基本上是在尝试通过页脚动态地改变背景图像的大小，而不是不成比例。我希望我可以发布一个视频来进行视觉展示。这是我的 HTML 和 CSS 代码。

body {
  font-family: arial;
  display: block;
  width: 100%;
  display: -webkit-box;
  -webkit-box-pack: center;
  text-align: center;
  background-image: none;
}

#background {
  display: block;
  background-image: url("background_image.png");
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-size: contain;
  width: 1213.5px;
  height: 700px;
}

#inner_body {
  border-radius: 0px;
  padding: 15px 0px 200px 0px;
  width: 900px;
  margin: 100px 200px 200px 100px;
  position: relative;
  background-color: white;
  display: -webkit-box;
  -webkit-box-flex: 1;
  -webkit-box-orient: vertical;
}

.header {
  background-color: white;
  display: inline-block;
  width: 100%;
  text-align: center;
  position: fixed;
  left: 0px;
  top: 0px;
  z-index: 3;
}

.header .top_menu {
  text-align: center;
  display: inline-block;
  padding: 2.5px 0px 2.5px 0px;
  position: relative;
  left: -70px;
  margin-top: 4px;
}

#website_logo {
  float: left;
  position: fixed;
  top: -3.5px;
  left: 170px;
  width: 150px;
  height: 50px;
  margin-top: 0px;
}

.nav_bar {
  display: inline-block;
  clear: both;
  position: relative;
  width: 100%;
}

.nav_bar li {
  list-style: none;
  display: inline-block;
  clear: both;
  padding: 10px;
  margin: 0px 10px 0px 10px;
  color: black;
  font-size: 15px;
}

.nav_bar li:hover {
  background-color: white;
  transition: 0.2s;
  border-radius: 30px;
  color: #ff37f2;
}

#footer {
  background-size: contain;
  display: block;
  position: fixed;
  bottom: 0px;
  left: 0px;
  text-align: center;
  padding: 10px;
  width: 1213.5px;
  background-color: #ff37f2;
}

#h1 {
  margin: 10px;
  margin: 10px;
}

#left_nav {
  height: 100%;
  width: 170px;
  position: fixed;
  background-color: white;
  list-style: none;
  margin-top: 20px;
  z-index: 2;
  display: block;
  left: 0px;
}

.side_text {
  font-size: 15px;
  list-style: none;
  text-decoration: none;
  font-family: helvetica;
  padding: 20px;
  display: block;
  color: black;
  text-align: center;
  margin: 20px;
  text-align: center;
}

.side_text:hover {
  background-color: #ff37f2;
  transition: 0.2s;
  border-radius: 45px;
  color: white;
}

#inner_nav {
  margin-top: 55px;
}

.text {
  margin: 20px;
  padding: 20px;
  display: block;
}


}
<!DOCTYPE html>
<html lang="en" dir="ltr">

<head>
  <link rel="stylesheet" href="main.css">
  <link rel="icon" href="">
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>WeebFreaks</title>
</head>

<body>
  <div id="wrapper">
    <header class="header">
      <div id="website_logo">
        <a href="index.html"> <img id="website_logo" src="logo2.png" alt="website_logo"></a>
      </div>
      <div class="top_menu">
        <nav class="nav_bar">
          <a href="index.html" id="home">
            <li>groups</li>
          </a>
          <a href="index.html" id="home">
            <li>messages</li>
          </a>
          <a href="index.html" id="home">
            <li>home</li>
          </a>
          <a href="index.html" id="home">
            <li>posts</li>
          </a>
          <a href="index.html" id="home">
            <li>manga</li>
          </a>
        </nav>
      </div>
    </header>
    <div id="left_nav">
      <nav id="inner_nav">
        <li> <a id="y_a" class="side_text" href="index.html">Your Account</a>
          <li> <a id="n_v" class="side_text" href="index.html">New groups</a></li>
          <li><a id="n_p" class="side_text" href="index.html">New Posts</a></li>
          <li> <a id="s_v" class="side_text" href="index.html">Saved groups</a></li>
          <li><a id="s_c" class="side_text" href="index.html">Saved Comments</a></li>
          <li><a id="s_p" class="side_text" href="index.html">Saved Posts</a></li>
          <li><a id="Friends" class="side_text" href="index.html">Friends</a></li>
      </nav>
    </div>
  </div>
  <div id="background">
    <div id="inner_body">
      <h1 id="h1">Website coming soon!</h1>
      <div id="p1">
        <p> there is no functionality in this website yet, so these links will not work,<br> please be patient because I want to get this out as fast and efficient as possible, thanks.</p>
      </div>
      <footer id="footer">
        <div class="bottom_menu">
          <nav class="nav_bar">
            <a href="index.html" id="home">
              <li>privacy</li>
            </a>
            <a href="index.html" id="home">
              <li>help</li>
            </a>
            <a href="index.html" id="home">
              <li>new anime!</li>
            </a>
            <a href="index.html" id="home">
              <li>new manga!</li>
            </a>
          </nav>
        </div>
    </div>
    </footer>
  </div>
</body>

</html>

标签： javascripthtmlcss

解决方案

OP 代码中有太多内容（以及大量不起作用的样式），无法很好地了解布局，这是一个有效的解决方案所必需的。基本上我猜到你的网页应该是怎样的。与问题最相关的样式部分是：

/* Shorthand */
background: url(https://domain-name.top/path/to/image.jpg) no-repeat fixed center;
background-size: contain; 

/* Equivalent */
background-image: url(https://domain-name.top/path/to/image.jpg);
background-repeat: no-repeat;
background-attachment: fixed;
background-position: center;
background-size: contain;

参考： 背景速记
注：单击位于右上角的徽标以查看侧面菜单。 

* {
  overflow: hidden;
}

footer,
nav,
label,
a,
ul,
li {
  margin: 0;
  padding: 0;
}

body {
  font: 1.5ch/1 'Segoe UI';
}

main {
  position: relative;
  width: 100vw;
  min-height: 100vh;
}

header,
footer {
  position: fixed;
  left: 0;
  right: 0;
  display: table;
  border-collapse: collapse;
  width: 100%;
  height: 30px;
}

header {
  top: -10px;
  z-index: 3;
  background: #fff;
}

footer {
  bottom: 0;
  z-index: 1;
  background-color: #ff37f2;
}

section {
  display: inline-block;
}

.bar {
  display: table-colgroup;
}

.links {
  display: table-row;
}

.links li {
  display: table-cell;
  padding: 5px;
  border: 0;
}

a {
  display: block;
  min-width: 8ch;
  padding: 2px 5px;
  border: 0;
  border-radius: 6px;
  text-decoration: none;
  color: #ff37f2;
  text-align: center;
  background: #fff;
}

a:hover {
  color: #fff;
  background: #ff37f2;
  cursor: pointer;
}

label {
  display: block;
  min-width: 30px;
  padding: 0;
  background: transparent;
  cursor: pointer;
}

.logo {
  position: relative;
  top: 10px;
  width: 30px;
  height: 30px;
  padding: 0;
  object-fit: contain;
}

footer a {
  color: #fff;
  background: none;
}

footer a:hover {
  color: #ff37f2;
  background: #fff;
}

.left {
  position: fixed;
  top: 30px;
  left: 0;
  z-index: 2;
  max-width: 30%;
  height: 0;
  overflow-y: auto;
  background: #fff;
}

.menu {
  position: absolute;
  top: 0;
  left: 0;
  background: #fff;
}

.menu .links {
  display: flex;
  flex-flow: column nowrap;
  justify-content: space-around;
}

.menu .links li {
  display: block;
}

#switch:checked+.left {
  min-width: 20%;
  min-height: calc(100vh - 30px);
}

.right {
  position: absolute;
  top: 30px;
  right: 0;
  bottom: 30px;
  z-index: 1;
  width: 100vw;
  min-height: calc(100vh - 60px);
  overflow-y: scroll;
  background: url(https://cdna.artstation.com/p/assets/images/images/019/566/710/large/kate-kneebone-su-background-style.jpg?1564059648) no-repeat fixed center;
  background-size: contain;
}

.content {
  padding: 10px 20px 30px;
}

.content * {
  margin: reset;
  padding: reset;
}

h1 {
  font-size: 3ch;
}

h2 {
  font-size: 2.75ch;
}

h3 {
  font-size: 2.25ch;
}

h1,
h2,
h3 {
  text-align: center;
}
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Under Construction</title>
</head>

<body>

  <main>
    <header>
      <nav class="bar">
        <ul class='links'>
          <li><label for='switch'><img class='logo' src='https://4s10x0uwgv-flywheel.netdna-ssl.com/wp-content/uploads/2017/01/graphic-design-logo.png'></label></li>
          <li><a href="about:blank" target='_blank'>Link</a></li>
          <li><a href="about:blank" target='_blank'>Link</a></li>
          <li><a href="about:blank" target='_blank'>Link</a></li>
          <li><a href="about:blank" target='_blank'>Link</a></li>
          <li><a href="about:blank" target='_blank'>Link</a></li>
        </ul>
      </nav>
    </header>
    <input id='switch' type='checkbox' hidden>
    <section class='left'>
      <nav class="menu">
        <ul class='links'>
          <li><a href="about:blank" target='#'>Page</a></li>
          <li><a href="about:blank" target='#'>Page</a></li>
          <li><a href="about:blank" target='#'>Page</a></li>
          <li><a href="about:blank" target='#'>Page</a></li>
          <li><a href="about:blank" target='#'>Page</a></li>
          <li><a href="about:blank" target='#'>Page</a></li>
          <li><a href="about:blank" target='#'>Page</a></li>
          <li><a href="about:blank" target='#'>Page</a></li>
          <li><a href="about:blank" target='#'>Page</a></li>
          <li><a href="about:blank" target='#'>Page</a></li>
          <li><a href="about:blank" target='#'>Page</a></li>
          <li><a href="about:blank" target='#'>Page</a></li>
        </ul>
      </nav>
    </section>
    <section class='right'>
      <article class='content'>
        <h1>Monty Python and the Holy Grail</h1>
        <p>Burn her anyway! Where'd you get the coconuts? Did you dress her up like this? Did you dress her up like this? The Lady of the Lake, her arm clad in the purest shimmering samite, held aloft Excalibur from the bosom of the water, signifying by
          divine providence that I, Arthur, was to carry Excalibur. That is why I am your king.</p>
        <p>Bloody Peasant! No, no, no! Yes, yes. A bit. But she's got a wart. <strong> Why do you think that she is a witch?</strong> <em> It's only a model.</em> Burn her anyway!</p>
        <h2>How do you know she is a witch?</h2>
        <p>You can't expect to wield supreme power just 'cause some watery tart threw a sword at you! Well, what do you want? Well, Mercia's a temperate zone! Oh! Come and see the violence inherent in the system! Help, help, I'm being repressed!</p>
        <ol>
          <li>He hasn't got shit all over him.</li>
          <li>No, no, no! Yes, yes. A bit. But she's got a wart.</li>
          <li>Found them? In Mercia?! The coconut's tropical!</li>
        </ol>
        <h3>Burn her!</h3>
        <p>She looks like one. Well, how'd you become king, then? Shut up! Where'd you get the coconuts? Did you dress her up like this?</p>
        <ul>
          <li>The Knights Who Say Ni demand a sacrifice!</li>
          <li>And the hat. She's a witch!</li>
          <li>Shut up!</li>
        </ul>
        <p>I am your king. The swallow may fly south with the sun, and the house martin or the plover may seek warmer climes in winter, yet these are not strangers to our land. I have to push the pram a lot. The Knights Who Say Ni demand a sacrifice!</p>
        <p>Well, we did do the nose. Well, we did do the nose. And the hat. She's a witch! Who's that then? You don't vote for kings. Where'd you get the coconuts?</p>
        <p>Burn her! We want a shrubbery!! Knights of Ni, we are but simple travelers who seek the enchanter who lives beyond these woods. I dunno. Must be a king. On second thoughts, let's not go there. It is a silly place.</p>
        <p>Now, look here, my good man. Oh, ow! Well, I got better. Ni! Ni! Ni! Ni!</p>
        <p>Found them? In Mercia?! The coconut's tropical! Well, I didn't vote for you. What do you mean? She looks like one. Shut up!</p>
        <p>No, no, no! Yes, yes. A bit. But she's got a wart. Well, we did do the nose. On second thoughts, let's not go there. It is a silly place. Where'd you get the coconuts? I am your king.</p>
        <p>Well, what do you want? Who's that then? Now, look here, my good man. The nose? On second thoughts, let's not go there. It is a silly place. I don't want to talk to you no more, you empty-headed animal food trough water! I fart in your general
          direction! Your mother was a hamster and your father smelt of elderberries! Now leave before I am forced to taunt you a second time!</p>
        <p>I have to push the pram a lot. Listen. Strange women lying in ponds distributing swords is no basis for a system of government. Supreme executive power derives from a mandate from the masses, not from some farcical aquatic ceremony.</p>
        <p>I dunno. Must be a king. Did you dress her up like this? Ni! Ni! Ni! Ni! I am your king. Listen. Strange women lying in ponds distributing swords is no basis for a system of government. Supreme executive power derives from a mandate from the masses,
          not from some farcical aquatic ceremony.</p>
        <p>Did you dress her up like this? The Knights Who Say Ni demand a sacrifice! Now, look here, my good man. Why?</p>
        <p>Well, I didn't vote for you. Burn her! The nose? No, no, no! Yes, yes. A bit. But she's got a wart. The Lady of the Lake, her arm clad in the purest shimmering samite, held aloft Excalibur from the bosom of the water, signifying by divine providence
          that I, Arthur, was to carry Excalibur. That is why I am your king.</p>
      </article>
    </section>
    <footer>
      <nav class="bar">
        <ul class='links'>
          <li> <a href="about:blank" target='#'>Page</a></li>
          <li> <a href="about:blank" target='#'>Page</a></li>
          <li> <a href="about:blank" target='#'>Page</a></li>
          <li><a href="about:blank" target='_blank'>Link</a></li>
          <li><a href="about:blank" target='_blank'>Link</a></li>
          <li><a href="about:blank" target='_blank'>Link</a></li>
        </ul>
      </nav>
    </footer>
  </main>

</body>

</html>

推荐阅读