-1

在我的网站中，这是在背景图像幻灯片放映中工作的。但我也需要为身体做同样的事情。谁能帮我？

.cb-slideshow li span {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0px;
    left: 0px;
    color: transparent;
    background-size: cover;
    background-position: 50% 50%;
    background-repeat: none;
    opacity: 0;
    z-index: 0;
    -webkit-backface-visibility: hidden;
    -webkit-animation: imageAnimation 36s linear infinite 0s;
    -moz-animation: imageAnimation 36s linear infinite 0s;
    -o-animation: imageAnimation 36s linear infinite 0s;
    -ms-animation: imageAnimation 36s linear infinite 0s;
    animation: imageAnimation 36s linear infinite 0s;
}
4

4 回答 4

0

如果您想在浏览器窗口更改大小时调整页面大小，您可以使用媒体查询（只有现代浏览器支持此功能） - 或者您可以选择使用 javascript（第三个选项是两者）。但是，您的问题表明您要避免使用 javascript。我在下面用媒体查询做了一个例子。当您的屏幕尺寸介于 800px 和 1000px 之间时，将应用 css。您可以组合这些语句，例如，如果您只想使用 min 或 max 。

@media all and (max-width: 1000px) and (min-width: 800px) {
  .cb-slideshow li span {
    /* css here*/
  }
}

您可以使用媒体查询更改任何元素。它通常用于创建响应式设计。

于 2013-03-27T06:45:11.827 回答
0

如果您正在寻找如何在没有足够内容的情况下设置您的正文窗口范围，请尝试

html, body{
    width: 100%;
    height: 100%
}
于 2013-03-27T06:46:13.153 回答
0

你可以使用一种叫做响应式设计的东西。它使用媒体查询根据屏幕分辨率进行调整。只需在任何流行的搜索引擎中搜索响应式设计，您就会从链接中学到很多东西。

现在你可以将这种风格添加到你的身体

body {
  width:  100%;
  height: 100%;
}

这将使它的身体反应。

于 2013-03-27T06:55:54.780 回答
0

快速示例，只需将其添加到您的页面，当页面低于 960 像素时，整个正文应该消失

@media screen and(max-width:960px){
   body{
      display:none;
   }
}

现在您可以添加尽可能多的更改以适应所有尺寸

于 2013-03-27T06:59:18.470 回答