6

我试图让背景在文本滚动时保持静止，并将图像居中并防止平铺或重复。就目前而言，我可以得到它，但不能同时得到。目前我的样式表以这种方式处理它。

{
background: url(LOCATION OF PIC FILE) repeat fixed;
height: 610px;
text-align: center;
margin: 0 auto;
overflow: hidden;
}

据我所知高度：610px；限制文本可以向上滚动的距离，我想保留它。我试图更改“重复固定”部分，但没有得到我想要的结果。我试过这个...

{
background-repeat: no-repeat;
background-attachment: fixed;
background-position: center;
height: 610px;
}

...在 HTML 中使用这个 ..

<div id="intro">
<img src="IMAGE SOURCE" width="100%" height="100%">
</div>

但这并不能保持背景固定......

任何帮助，将不胜感激。

4

4 回答 4

10

在查看了您的 CSS 之后，我注意到了一些可以通过稍微调整来解决的冲突。首先，我绝对建议您使用浏览器 Web 开发工具（例如 Firebug）进行更改和调整。我发现它可以节省您的耐心和挫败感。

我遇到的解决方案如下：

.body{
    background-image: url('../images/go_here.png');
    background-repeat:repeat-x;
    background-attachment:fixed;
    background-position: left top;
    position:absolute;
    height:610px
    width: ?px;
    margin:0;
   }

如果您希望背景水平重复，请使用 background-repeat: x-axis; 垂直，背景重复：y轴；。为了确保背景不滚动，请使用 background-attachment: fixed;。背景位置应该使用两个单词或两个数字测量值（例如中心中心/左上/右上/右中/左中/右下或 0px 0px）。因为你希望背景有一个高度，我假设一个宽度；元素的位置必须是绝对的。如果您决定使用浮动，则主容器或背景必须是绝对的。

我的建议是，如果您想将文本附加到背景，这取决于您。根据我的经验，我发现最好将文本与背景分开。从长远来看，它只会减少头痛。我将文本编码如下：

  .text{
       text-align: center;
       overflow: hidden;
       height: 610?px;
       width: ?px;
       }

至于 img src 和 background-image 的用法，根据我的经验，我发现它们有冲突。由于某些奇怪的原因，除非标签之外有单词或短语，否则 img src 标签将不起作用。通过同时使用两者，img src 将覆盖背景 css 元素。我发现 img 标签在 CSS 中更难操作。这是可行的，但执行起来却是一场噩梦。

例子：

     <div><img src="http://www.example.com">Example</div>

根据我的经验，我发现 img src 与 text-indent: -9999px; 密切相关。或显示：无；。除非标签有要附加的单词或元素，否则该标签将不起作用。文本缩进导致单词（即示例）被推离屏幕。显示：无；使该单词看起来不可见，但如果突出显示，它会出现在图像上。（如果这没有意义，我深表歉意。我总是可以澄清。）

至于 HTML 标记，我要么使用 img 标签，要么只使用 div 标签。HTML 标记：

    <html>
     <body>
      <div class="text">I put my text here.</text>
     </body>
    </html>

让我知道这个是否奏效。我很抱歉，这变得这么长。我不是故意的。如果您遇到任何问题或需要更多说明，请告诉我。我不介意帮忙。

于 2012-10-18T03:41:49.043 回答
1 
.whateverclassyouwant{background: (url) fixed center no-repeat; margin:0 auto; height:auto}

应该管用

于 2012-10-18T00:45:07.800 回答
1

试试下面的。请注意添加no-repeat和background-size：

{
    background: url(LOCATION OF PIC FILE) no-repeat;
    background-size: cover;
    height: 610px;
    text-align: center;
    margin: 0 auto;
    overflow: hidden;
}
于 2015-04-20T16:21:04.130 回答
0

我认为你缺少的是你有

    overflow: hidden;

在您的背景上不允许 div 滚动，除非您打开了那些在您的 css 中属于哪个的选项。

如果您希望将溢出隐藏在您的 div 上，那很好，但它会在其上放置滚动条。

看看这个链接

于 2012-10-17T20:30:34.100 回答