Question

我一直在看这个css演示（generate a random number），并且喜欢它：但是，我希望能够将它放入div中，而不是覆盖整个页面。

这可能吗？我已经能够使用这个css代码将单个图像放入div中

.cb-slideshow li span {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0px;
    left: 0px;

但是对于我的生活，我无法让图片幻灯片显示在div中工作

我不是一个css家伙（因为它很明显）并且如果有人可以帮助我，我会很感激一些指示;）

谢谢！

========= update ========

我可能还不够清楚：我已经能够让div背景工作了，但我真正想要做的是使用css动画div中的幻灯片演示。

我已经从演示中实现了css，但它是全屏的，我无法解决如何将其限制为div / class，尽管已经工作了很长时间。

我不能得到的是演示中的css

<header id="home">
   .. [snip] ..
   <div class="container">
     <ul class="cb-slideshow">
            <li><span></span><div><h3>page1</h3></div></li>
            <li><span></span><div><h3>page2</h3></div></li>
            <li><span></span><div><h3>page3</h3></div></li>
            <li><span></span><div><h3>page4</h3></div></li>
            <li><span></span><div><h3>page5</h3></div></li>
            <li><span></span><div><h3>page6</h3></div></li>
        </ul>

我的html是

{{1}}

那么为什么我的代码中的css只限于标题，但动画中的css会占用整个页面？

Answer 1

您可以使用此

HTML

<div class="header_div">

</div>

CSS

.header_div {
   width: 100%;
   height: 400px;
   background-image: url('http://www.wallpapereast.com/static/cache/85/2f/852fa0958af9bfca3e64fa66aa1ad907.jpg');     
   background-size: cover;
   background-position: center;  
}

Answer 2

只需在HTML中创建多个div，如下所示：

<div id = "number1"></div>
<div id = "number2"></div>
<div id = "number3"></div>

然后，在CSS中，输入：

#number2 {
    background: url(/assets/images/landscape-mountains-nature-man.jpg) no-repeat center top fixed;
    -webkit-background-size: contain;
    background-size: contain;
}

这个#number2可以是数字1或3，只是将内容放在其他div中希望我帮忙！

Answer 3

我建议如果您使用div，使用jquery指定屏幕的高度，这将用于指定屏幕的高度，也适用于手机和平板电脑。

此方法适用于 <body> ：

的CSS：

body {
  background: url('http://www.planwallpaper.com/static/images/colorful-triangles-background_yB0qTG6.jpg') no-repeat fixed;
  background-size: cover;
  background-position: center;
}

或者您可以在div中添加Jquery使用它：

$(function() {
    var height = $(window).height()+"px",
        $element = $('.background-image');

    $element.css('height', height);
});

这是为了让你的div全屏。

div的背景图片，而不是页面

3 个答案: