Question

我正在尝试使文本保持静止，同时文本滚动它并使图像居中并使其不会平铺或重复。现在，我可以得到它，但不是两个。目前我的样式表以这种方式处理它。

{
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>

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

任何帮助将不胜感激。

Answer 1

在看了你的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>

如果有效，请告诉我。我很抱歉这变得如此之久。我并不打算这样做。如果您遇到任何问题或需要更多说明，请告诉我。我不介意帮忙。

Answer 2

尝试以下方法。请注意添加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;
}

Answer 3

我认为你缺少的是你有

    overflow: hidden;

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

如果你想在你的div上隐藏溢出，那么这很好，但它会在上面放置滚动条。

check out this link

Answer 4

.whateverclassyouwant{background: (url) fixed center no-repeat; margin:0 auto; height:auto}

应该有效

保持背景图像不在CSS中移动或平铺

4 个答案: