Question

我希望在调整窗口大小时，我的图像的中心部分始终保持可见。我希望图像在左侧和右侧消失，同样使图像的中心部分可见。

这就是我所拥有的：

<section id="home-slider" class="flexslider fullbg"
     style="background-image:url(img/slide/home/1_1_c.jpg); height:600px; padding:0px;">
<ul class="slides">
    <li class="home-slide">
        <div class="flex-caption transparent light-font center">
            <p class="home-slide-content bounceInLeft animated" data-wow-delay="0.5s" data-wow-duration="4s">
                Scape. <span class="highlight">Scope.</span> Style.<span class="highlight"> Context.</span>
            </p>

            <p class="home-slide-content bounceIn animated" data-wow-delay="2s" data-wow-duration="4s">
                We <span class="highlight">build</span> it
            </p>
        </div>
    </li>
    <li class="home-slide">
        <div class="flex-caption transparent light-font center">
            <p class="home-slide-content swing animated" data-wow-delay="2s" data-wow-duration="4s">
                Western Red <span class="highlight">Cedar Wood Cladding</span>
            </p>

            <p class="home-slide-content fadeInUp animated" data-wow-delay="2s" data-wow-duration="4s"
               style="font-size:80px;">
                <span class="highlight">Full</span> Electrics Package
            </p>
        </div>
    </li>
    <li class="home-slide">
        <div class="flex-caption transparent light-font center">
            <p class="home-slide-content flipInY animated">
                <span class="highlight">Fully</span> Insulated
            </p>

            <p class="home-slide-content slideInLeft animated">
                With a <span class="highlight">50 year guarantee </span>rubber roof
            </p>
        </div>
    </li>
</ul>
</section>

CSS：

#home-slider {
height:100%;
}
.home-slide-content {
font-family:'BebasNeueRegular',sans-serif;
font-size:90px;
text-transform:uppercase;
position:relative;
margin-bottom:0px;
text-align:center;
line-height:1;
}
.home-slide-content {
padding:0;
color:#ffffff;
}
/* FlexSlider Necessary Styles */ .flexslider {
overflow:hidden;
margin:0;
padding:0;
}
.flexslider .slides>li {
display:none;
/*-webkit-backface-visibility: hidden;*/
}
/* Hide the slides before the JS is loaded. Avoids image jumping */
.flexslider .slides img {
width:100%;
display:block;
}
.fullbg { 
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}

Answer 1

<强> jsBin demo

.fullbg { 
    background: none 50% / cover;
}

P.S：你错过了center center（或简写50%）背景位置

~~.fullbg { 背景尺寸：封面; }~~

调整窗口大小时居中对齐图像css

1 个答案: