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

罗比P14383

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

这是我所拥有的:

<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;
}
罗科·C·布尔扬

jsBin演示

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

PS:您缺少center center(或简写50%)背景位置

.fullbg {background-size:cover; }

本文收集自互联网,转载请注明来源。

如有侵权,请联系[email protected] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

调整大小时使图像居中

来自分类Dev

CSS-居中的div顶部在调整窗口大小时消失

来自分类Dev

调整窗口大小时从CSS顶部的锚图像

来自分类Dev

调整窗口大小时对齐方式更改

来自分类Dev

调整窗口大小时图像的位置改变

来自分类Dev

调整窗口大小时如何使图像流畅?

来自分类Dev

调整窗口大小时固定图像位置

来自分类Dev

在JavaFX中调整窗口大小时如何调整图像大小

来自分类Dev

html / CSS如何在调整窗口大小时使div始终居中

来自分类Dev

调整手机屏幕大小时,对齐不居中

来自分类Dev

CSS在窗口调整大小时调整div和div内的图像

来自分类Dev

调整窗口大小时CSS样式的更改

来自分类Dev

调整窗口大小时在Bootstrap网格内居中的元素

来自分类Dev

调整窗口大小时如何保持元素居中

来自分类Dev

调整窗口大小时,图像高度不会调整

来自分类Dev

<li>调整窗口大小时会对齐的项目

来自分类Dev

水平对齐div,在窗口调整大小时停止浮动

来自分类Dev

调整窗口大小时修改图像大小(jQuery)

来自分类Dev

在调整窗口大小时,如何防止使用HTML-CSS移动图像?

来自分类Dev

HTML/CSS:如何在调整窗口大小时使图像周围的文本适合?

来自分类Dev

调整大小时如何防止图像填充整个Tkinter窗口?

来自分类Dev

ReactJS。图像在调整窗口大小时消失

来自分类Dev

在调整窗口大小时更改CSS会破坏CSS

来自分类Dev

CSS-调整窗口大小时按钮消失

来自分类Dev

窗口调整大小时的 CSS 网格布局奇怪行为

来自分类Dev

Matlab GUI:调整GUI窗口大小时,调整图像大小(加载到按钮)

来自分类Dev

使用 resizeEvent 调整窗口大小时调整 Qlabel 图像大小

来自分类Dev

在CSS中居中可调整大小的图像

来自分类Dev

调整大小时图像模糊

Related 相关文章

  1. 1

    调整大小时使图像居中

  2. 2

    CSS-居中的div顶部在调整窗口大小时消失

  3. 3

    调整窗口大小时从CSS顶部的锚图像

  4. 4

    调整窗口大小时对齐方式更改

  5. 5

    调整窗口大小时图像的位置改变

  6. 6

    调整窗口大小时如何使图像流畅?

  7. 7

    调整窗口大小时固定图像位置

  8. 8

    在JavaFX中调整窗口大小时如何调整图像大小

  9. 9

    html / CSS如何在调整窗口大小时使div始终居中

  10. 10

    调整手机屏幕大小时,对齐不居中

  11. 11

    CSS在窗口调整大小时调整div和div内的图像

  12. 12

    调整窗口大小时CSS样式的更改

  13. 13

    调整窗口大小时在Bootstrap网格内居中的元素

  14. 14

    调整窗口大小时如何保持元素居中

  15. 15

    调整窗口大小时,图像高度不会调整

  16. 16

    <li>调整窗口大小时会对齐的项目

  17. 17

    水平对齐div,在窗口调整大小时停止浮动

  18. 18

    调整窗口大小时修改图像大小(jQuery)

  19. 19

    在调整窗口大小时,如何防止使用HTML-CSS移动图像?

  20. 20

    HTML/CSS:如何在调整窗口大小时使图像周围的文本适合?

  21. 21

    调整大小时如何防止图像填充整个Tkinter窗口?

  22. 22

    ReactJS。图像在调整窗口大小时消失

  23. 23

    在调整窗口大小时更改CSS会破坏CSS

  24. 24

    CSS-调整窗口大小时按钮消失

  25. 25

    窗口调整大小时的 CSS 网格布局奇怪行为

  26. 26

    Matlab GUI:调整GUI窗口大小时,调整图像大小(加载到按钮)

  27. 27

    使用 resizeEvent 调整窗口大小时调整 Qlabel 图像大小

  28. 28

    在CSS中居中可调整大小的图像

  29. 29

    调整大小时图像模糊

热门标签

归档