Question

我有一个包含4个项目的滑块。

CSS

#section_3 {height:600px;}
#section_3 ul {list-style:none; width:400%; margin:0; padding:0;}
#section_3 ul li {float:left; width:25%; display:block; }
#section_3 ul li.sec1{background:url('../imgs/bg1.jpg') no-repeat; height:600px;}
#section_3 ul li.sec2{background:url('../imgs/bg2.jpg') no-repeat; height:600px;}
#section_3 ul li.sec3{background:url('../imgs/bg1.jpg') no-repeat; height:600px;}
#section_3 ul li.sec4{background:url('../imgs/bg2.jpg') no-repeat; height:600px;}

HTML

<div id="section_3" class="overflow">
        <ul id="slider">
            <li class="sec1">
                <h1>1</h1>
            </li>
            <li class="sec2">
                <h1>2</h1>
            </li>
            <li class="sec3">
                <h1>3</h1>
            </li>
            <li class="sec4">
                <h1>4</h1>
            </li>
        </ul>
    </div>

滑块工作正常，但现在我想排序，每个LI都有自己的背景100％宽度和100％高度。

它可能在jQuery，javascript

我怎样才能做到这一点？

Answer 1

您无法以跨浏览器方式缩放CSS背景图像。您需要将图像放在html（<img/>）中，将其置于<li>内的绝对位置以将其从流中取出，并使用CSS（可能甚至JS根据您的情况）进行缩放图像的大小为<li>的100％。

Answer 2

尝试

#section_3 ul li.sec1{background:url('../imgs/bg1.jpg') no-repeat; height:600px; background-size: 100% 100%;}
#section_3 ul li.sec2{background:url('../imgs/bg2.jpg') no-repeat; height:600px; background-size: 100% 100%;}
#section_3 ul li.sec3{background:url('../imgs/bg1.jpg') no-repeat; height:600px; background-size: 100% 100%;}
#section_3 ul li.sec4{background:url('../imgs/bg2.jpg') no-repeat; height:600px; background-size: 100% 100%;}

这是CSS中的一个简单修复。如果您想在Javascript中执行此操作，请尝试

document.getElementById("id_of_li").style.backgroundSize = "100% 100%";

查看w3schools教程：http://www.w3schools.com/cssref/css3_pr_background-size.asp

如何在<li>？</li>中获得100％宽度/高度的背景图像

2 个答案: