0

在我的网站上，如果您一直滚动到侧栏的底部（在右侧），您会看到我正在尝试制作的电子邮件注册框（通过文本小部件。）我已经尝试了所有一天让它正常工作，但无法弄清楚。一件事起作用，另一件事坏了。我不确定我是否应该在我的文本小部件中发布它是什么，或者我的 style.css 中有什么，供大家查看。也许有人可以检查链接，看看他们是否能看到发生了什么。如果需要，我很乐意发布代码。该主题使用 Twitter 引导程序进行响应。

这是我的 custom.css（这是一个子主题）如果我需要更改任何内容，请随时告诉我。

/* ------------------------------------------------------------------------ Import Standard Styles */

@import url( '../standard3/style.css' );

/* ------------------------------------------------------------------------ Customizations */
#disqus_thread {
    clear: both!important;
    background: white;
    background: white;
    margin: 0 0 40px 0;
    position: relative;
    border-radius: 4px;
    -moz-border-radius: 4px;
    -webkit-border-radius: 4px;
    -webkit-box-shadow: inset 0 1px 2px 0 rgba(0, 0, 0, 0.2),transparent 0 0 0,transparent 0 0 0,transparent 0 0 0,transparent 0 0 0;
    -moz-box-shadow: inset 0 1px 2px 0 rgba(0, 0, 0, 0.2),transparent 0 0 0,transparent 0 0 0,transparent 0 0 0,transparent 0 0 0;
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.2),transparent 0 0 0,transparent 0 0 0,transparent 0 0 0,transparent 0 0 0;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    padding: 0 20px;
}

.dsq-comment-text p
{
color: black;
font-size: 13px;
font-weight: normal;
line-height: 18px;
}



.widget .signupForm {
    /* Box always has colour, pic always on right */
    background-color: #06d0d2;
    background-image: url(http://noahsdad.com/wp-content/uploads/2012/05/noah-side-bar1.jpg);
    background-position: right bottom;
    background-repeat: no-repeat;

    /* height ensures full pic is shown  */
    height: 300px;    

    /* allow us to position contents */
    position: relative;
}

/* Absolutely position the form within the widget */
.widget .signupForm form {
 position: absolute;
 right: 160px;  
 bottom: 70px;
}

.widget .signupForm form input {
 display: block;
}


//* now just resize the widget box and move the form */

    .widget .signupForm {
        width: 300px;
        height: 240px;
        background-size: 100%;    
    }

    .widget .signupForm form {
        right: 120px;   
        bottom: 50px;
    }
}

/* adjust slightly for larger sizes */
@media screen and (min-width: 980px) {
    .widget .signupForm {
        width: 343px;
        height: 275px;
        background-size: 100%;    
    }

    .widget form .signupForm {
        right: 160px;   
        bottom: 70px;
    }
}


/* ------------------------------------------------------------------------ Media Queries */

/* Smartphones */
@media (max-width: 480px) {

}

/* Tablet and Mobile */
@media (max-width: 979px) {    

}

/* Mobile to Tablet */
@media only screen and (max-width: 767px) {

}


/* Landscape Tablets */
@media (min-width: 768px) and (max-width: 979px) {

}

/* Desktop */
@media (min-width: 980px) {

}
4

1 回答 1

1

答案很简单。您正在使用的background-image宽度为 370 像素，但#sidebar包含小部件的宽度仅为 300 像素。

解决方案 1
您需要使用成像软件将图像缩小到正确的宽度或增加#sidebar.

解决方案2
或者您可以更改背景的位置，使文本气泡不是被切断的部分。

.widget .signupForm{ background-position: -19px 0;}

解决方案 3
您可以使用 CSS3 来适应background-imageusing background-size：

.widget .signupForm{ background-size: contain; }

但支持有限：https ://developer.mozilla.org/en/CSS/background-size

编辑：基于发布的 CSS

您可以使用您拥有的原始尺寸图像。background-size由于这行 CSS ，已经声明的规则丢失了：

//* now just resize the widget box and move the form */

删除第一个正斜杠，所有 CSS 应该可以正常工作：

/* now just resize the widget box and move the form */

并将表格放置在图像之外，更改所有规则.widget .signupForm form：

.widget .signupForm form {
    bottom: 50px; /* change to 0 */
    right: 120px;
}
于 2012-05-18T01:38:11.473 回答