3

在尝试将滑块定位在背景中时，我设法使我的身体不居中，使其也居中，即使调整窗口大小时它也保持居中。

如果您的浏览器允许缩小该站点，则该站点处于活动状态，您可以看到该站点居中，但是当您打开它并且滑块图像太大时，它只会与窗口的左边缘对齐。

我是自学成才的，所以也许我错过了一些东西，或者只是需要一些指导来解决这个问题。请帮忙！

CSS在这里：

#billboardWrapper {height:600px;width:1800px; margin:-170px auto auto; position:relative; overflow:hidden;  }

#billboard {height:600px;width:1800px;position:relative;/*background:#1c1c1c;*/ background-position: 50% 0pt;}

#billboardPrev,
#billboardNext { display:block; text-indent:-9999px; position:absolute; left:40px; top:270px; width:30px; height:30px; cursor:pointer; background: url(arrows.png) no-repeat 0 0; z-index:99;}
#billboardNext {left:auto; right:40px; background-position:0 -92px; }

.slide {height:600px;width:1800px;display:none;  } 
.slide img {height:600px;  width:100%; background-position: 50% 0pt;  
.slideLeftLayout .slideTitle,.slideLeftLayout .slideText,.slideLeftLayout .slideLink {left:auto;}
.slideRightLayout .slideTitle,.slideRightLayout .slideText,.slideRightLayout .slideLink {right:50px;text-align:auto;}

html 是（用 firebug 复制，因为 html 是 shopify 液体）

<html>
<head>
<body id="welcome" class="index" data-twttr-rendered="true">
<div id="body">
<div id="utility-wrap">
<div id="header-wrap">
<div id="content-wrap">
<script type="text/javascript" src="//dk0684j3ynpoi.cloudfront.net/assets/client.js">
<div id="gatekeeper-content" class="">
<div id="body">
<div id="billboardWrapper">
<span id="billboardPrev">Previous</span>
<span id="billboardNext">Next</span>
<div id="billboard">
<div class="slide slideRightLayout" style="position: absolute; top: 0px; left: 0px; z-index: 2; opacity: 0; display: none; width: 1800px; height: 600px;">
<div class="slide slideRightLayout" style="position: absolute; top: 0px; left: 0px; display: block; z-index: 3; opacity: 1; width: 1800px; height: 600px;">
<img alt="" src="http://static.shopify.com/s/files/1/0059/9612/t/10/assets/slideTwo.jpg?108526">
</div>
</div>
</div>
</div>

![这是缩小后的样子][2] ![在窄分辨率下，滑块与窗口左侧对齐并移动][3] ![这就是我的目标？！？？] [4]

4

1 回答 1

3

即使您缩小浏览器，删除 style.css 第 287 行上的left:40pxfrom也会使上一个图标在滑块内可见。#billboardPrev, #billboardNext

您的“下一步”图标也没有显示。background-position: 0 -41px;在#billboardNextstyle.css 第 288 行显示该更改。

您的滑块图像太大。这就是为什么它在放大和缩小时发生变化的原因。

解决方案：

不要使用那个大图像，而是将其拆分为 2 个图像。

使用以下图像作为滑块图像： 小滑块图像

并供您#gatekeeper-content使用以下背景和 CSS。

滑块背景

background-repeat: repeat-x;

滑块图像被裁剪为 960 像素宽度。也尝试position:relative在您的代码上使用。

于 2012-05-23T10:09:15.890 回答