Question

我有一个背景图片，我已经设置为HTML中的标题元素。图像似乎响应，直到它达到一个ceratin宽度，然后它开始向左移动离开页面。有人可以帮我理解发生的事情，无论我尝试过什么，我都无法让它发挥作用：（

以下是我的代码，这里是小提琴http://jsfiddle.net/n7tBp/。如果您将浏览器窗口的大小调整为900px以下，则会开始将Google图片移至左侧

.header_area{
    padding-top: 10%;  /* slope */
    height: 200px;  /* start height */
    background-image: url("http://musically.com/wp-content/uploads/2013/10/Google.jpg");
    background-size: cover;
    -moz-background-size: cover;  /* Firefox 3.6 */
    background-position: center;  /* Internet Explorer 7/8 */
}

.header_area h1{
    color:#e5e6d6;
    font-size:34px;
    display: inline-block;
    -webkit-transform: skewX(-15deg);
    -moz-transform: skewX(-15deg);
    -ms-transform: skewX(-15deg);
    -o-transform: skewX(-15deg);
    transform: skewX(-15deg);
}

.header_area h2{
    color:#e5e6d6;
    font-size:22px;
    display: block;
    -webkit-transform: skewX(-15deg);
    -moz-transform: skewX(-15deg);
    -ms-transform: skewX(-15deg);
    -o-transform: skewX(-15deg);
    transform: skewX(-15deg);
}

.header_area figcaption{
    margin-left:30px;
    margin-top: -20px;
}

Answer 1

您可以使用此选项调整大小的选项。

封面 - 将背景图像缩放为尽可能大，以使背景区域完全被背景图像覆盖。背景图像的某些部分可能不在背景定位区域中的视野中

  -webkit-background-size: cover;
          background-size: cover;

DEMO http://jsfiddle.net/n7tBp/（当前版本）

包含： - 将图像缩放到最大尺寸，使其宽度和高度都适合内容区域

  -webkit-background-size: contain;
          background-size: contain;

DEMO http://jsfiddle.net/n7tBp/4/

百分比： - 以父元素的百分比设置背景图像的宽度和高度。第一个值设置宽度，第二个值设置高度。如果只给出一个值，则第二个值设置为＆＃34; auto＆＃34;

  -webkit-background-size: 100%;
          background-size: 100%;

演示http://jsfiddle.net/n7tBp/5/

响应背景图像在一定大小后向左移动

1 个答案: