Question

是否可以为位居background-attachment:fixed;的{{1}}位置div而不是视口？如果没有，也许还有其他一些选择吗？

CSS

div

HTML
.zest-ghost { width: 302px; height: 222px; top: 0; left: 50%; background-image: url(../images/logo-ghost.png); background-attachment: fixed; background-position: center; background-repeat: no-repeat; background-size: cover; }

此代码使图像<div class="zest-ghost"></div>相对于视口而不是fixed。一世需要相同的效果，但有可能移动图像左或对。图像应具有原始宽度和高度

Answer 1

希望这有助于你

     .zest-ghost{
            background-image: url('../images/zest-logo-ghost.png');
            background-repeat: no-repeat;
            background-attachment: fixed;
            height:100%;
            width:100%;
        }

请检查：http://jsfiddle.net/jdmitz/V8WqE/

Answer 2

您想要向下移动页面（正文）并使div的背景保持不变。那么简而言之，这将是parallax design的基础知识？因为它不会比滚动速度慢，但可以用javascript完成。这个CSS应该是起点，以便在没有javascript的情况下使页面尽可能可用。

然后我想你想要这样的东西：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  <head>
    <title>TITLE</title>
    <style>
      html,body
      { height:100%; }

      body
      {
        background-position:0px 0px;
        background-attachment: fixed;
      }

      .test
      {
        height:4em;
        background:url('150x150.jpg');
        background-attachment: fixed;
        background-position:5px 0px;
        background-size: cover;
      }

      div.space
      {
        height:70%;
      }
    </style>
  </head>

  <body>
    <div class="space">a</div>

    <div class="test">
    </div>

    <div class="space"></div>
  </body>
</html>

在行动中看到它：https://jsfiddle.net/hhdf6639/5

Answer 3

我们可以为此使用background-position属性。除了使用center之外，您还可以使用像素在div内实际移动图像。

.zest-ghost {
        width: 302px;
        height: 222px;
        top: 0;
        left: 50%;
        background-image: url(../images/logo-ghost.png);
        background-attachment: fixed;
        background-position: 50% 20px;
        background-repeat: no-repeat;
        background-size: cover;
    }

以上内容将x轴裁剪的内容调整为50％，并将图像垂直向下移动20px。

是否可以定位背景附件：相对于div而不是视口固定？

3 个答案: