我是新来的。我尝试了WordPress论坛和实际的主题论坛，但没有成功，我听说这是一个提问的好地方。我希望有人会对我的困境感兴趣。：）
我决定在自己主持的WordPress博客上使用静态平铺背景图像，并在一定程度上取得了成功。当您单击左侧菜单侧栏和右侧常规侧栏的图标时，我的侧栏将隐藏并“浮动”。如果您（在移动设备以外的其他设备上）单击它们，背景图像和灰色侧边栏颜色之间会出现白色间隙。在风格上四处挖掘之后。css昨天和今天，我都筋疲力尽了。我很想从一些有爱心的灵魂那里得到一些见解。
以下是我的网站：Dappled Things
以下是我的样式表中我认为可能相关的部分：
/*-----------------------------------------------------------------------------------*/
/* Off Canvas Layout
/*-----------------------------------------------------------------------------------*/
.content-wrap:before,
.content-wrap:after {
content: " ";
position: absolute;
z-index: -1;
top: 0;
left: -100%;
width: 100%;
height: 100%;
}
.content-wrap:after {
left: 100%;
}
#site-header,
.sidebar-left,
.content-wrap,
.sidebar-right {
width: 100%;
display: block;
position: relative;
}
body.active-sidebar,
.sidebar-left,
.sidebar-right {
background: #f2f2f2;
}
#site-header {
overflow: hidden;
text-align: center;
z-index: 4;
background-image:url(\'http://dappledthings.me/wp-content/uploads/2013/07/bg4.png\');
background-attachment: fixed;
}
/* JavaScript On */
.js .sidebar-left {
height: 0;
overflow: hidden;
margin-left: -100%;
margin-top: 0;
float: left;
}
.js .content-wrap {
position: relative;
margin-left: 0;
left: 0;
right: 0;
float: left;
z-index: 2;
}
.js .sidebar-right {
height: 0;
overflow: hidden;
margin-left: 100%;
margin-top: 0;
z-index: 1;
float: left;
}
/* Active Left Sidebar */
.js body.active-nav {
background: #f2f2f2;
}
.js .active-nav .off-canvas-nav {
position: fixed;
z-index: 2;
width: 100%;
overflow: hidden;
left: 81.25%;
right: auto;
top: 0;
-webkit-transition: left 0.2s ease-out;
-moz-transition: left 0.2s ease-out;
-o-transition: left 0.2s ease-out;
-ms-transition: left 0.2s ease-out;
transition: left 0.2s ease-out;
}
.active-nav .sidebar-left {
position: relative;
margin-left: 0;
width: 81.25%;
margin-top: 0;
height: auto;
float: left;
}
.js .active-nav .content-wrap {
position: fixed;
overflow: hidden;
width: 100%;
left: 81.25%;
right: auto;
top: 50px;
background: #fff
-webkit-transition: left .2s ease-out;
-moz-transition: left .2s ease-out;
-o-transition: left .2s ease-out;
-ms-transition: left .2s ease-out;
transition: left .2s ease-out;
}
.mask-left {
visibility: hidden;
position: fixed;
top: 0;
bottom: 0;
right: 0;
left: 0;
opacity: 0;
z-index: 1002;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
filter: alpha(opacity=0);
-webkit-box-shadow: -4px 0 6px rgba(84, 84, 84, .1);
-moz-box-shadow: -4px 0 6px rgba(84, 84, 84, .1);
box-shadow: -4px 0 6px rgba(84, 84, 84, .1);
}
.active-nav .mask-left {
visibility: visible;
left: 81.25%;
opacity: 0.8;
background: #fff
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)";
filter: alpha(opacity=80);
-webkit-transition: .01s opacity ease 0.2s;
-moz-transition: .01s opacity ease 0.2s;
-o-transition: .01s opacity ease 0.2s;
-ms-transition: .01s opacity ease 0.2s;
transition: .01s opacity ease 0.2s;
}
.active-nav .sidebar-right {
position: absolute;
overflow: hidden;
left: 109.765625%;
}
/* Active Right Sidebar */
.js .active-sidebar .off-canvas-nav {
position: fixed;
z-index: 2;
width: 100%;
overflow: hidden;
right: 81.25%;
left: auto;
top: 0;
-webkit-transition: right 0.2s ease-out;
-moz-transition: right 0.2s ease-out;
-o-transition: right 0.2s ease-out;
-ms-transition: right 0.2s ease-out;
transition: right 0.2s ease-out;
}
.active-sidebar .sidebar-left {
position: absolute;
overflow: hidden;
right: 109.765625%;
}
.js .active-sidebar .content-wrap {
position: fixed;
overflow: hidden;
width: 100%;
right: 81.25%;
left:auto;
top: 50px;
background: #fff
-webkit-transition: .2s right ease-out;
-moz-transition: .2s right ease-out;
-o-transition: .2s right ease-out;
-ms-transition: .2s right ease-out;
transition: .2s right ease-out;
}
.mask-right {
position: fixed;
top: 0;
bottom: 0;
right: 0;
left: 0;
visibility: hidden;
z-index: 1002;
opacity: 0;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
filter: alpha(opacity=0);
-webkit-box-shadow: 4px 0 6px rgba(84, 84, 84, .1);
-moz-box-shadow: 4px 0 6px rgba(84, 84, 84, .1);
box-shadow: 4px 0 6px rgba(84, 84, 84, .1);
}
.active-sidebar .mask-right {
right: 81.25%;
visibility: visible;
opacity: 0.8;
background: none;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)";
filter: alpha(opacity=80);
-webkit-transition: .01s opacity ease 0.2s;
-moz-transition: .01s opacity ease 0.2s;
-o-transition: .01s opacity ease 0.2s;
-ms-transition: .01s opacity ease 0.2s;
transition: .01s opacity ease 0.2s;
}
.active-sidebar .sidebar-right {
position: relative;
margin-left: 18.75%;
width: 81.25%;
margin-top:0;
height:auto;
float:left;
}
/* Off Canvas Nav Buttons */
.off-canvas-nav {
width: 100%;
overflow: hidden;
background: #fff
left: 0;
right: 0;
}
.off-canvas-nav .menu-item,
.off-canvas-nav .sidebar-item {
width: 18.75%;
display: block;
float: left;
}
.off-canvas-nav .sidebar-item {
float: right;
}
.off-canvas-nav .menu-button,
.off-canvas-nav .sidebar-button {
display: block;
width:100%;
height:50px;
text-indent: -99999px;
}
.off-canvas-nav .menu-button {
background:#f2f2f2 url(images/menu-btn.png) 50% 0 no-repeat;
}
.off-canvas-nav .sidebar-button {
background:#f2f2f2 url(images/sidebar-btn.png) 50% 0 no-repeat;
}
/* Position Fixed Iframe Bugfix */
.js .active-nav .entry-content iframe,
.js .active-sidebar .entry-content iframe {
display: none;
}
.js .active-nav .entry-content .fluid-width-video-wrapper,
.js .active-sidebar .entry-content .fluid-width-video-wrapper {
background: #fff
}
/* Equal Height Column Fix in Off-Canvas Mode */
.active-nav .column-wrap,
.active-sidebar .column-wrap {
overflow: hidden;
background: #fff
}
.active-nav #content-wrap,
.active-nav .sidebar-left,
.active-sidebar #content-wrap,
.active-sidebar .sidebar-right {
padding-bottom: 99999px !important;
margin-bottom: -99999px !important;
}
.active-nav #content-wrap,
.active-sidebar #content-wrap {
background: #fff
}
下面是我看到的屏幕截图：
Screen Capture
任何帮助都将不胜感激！
盖尔
