在我的网站上,这是在背景图片幻灯片放映。但我也需要为身体得到同样的东西。任何人都可以帮助我吗?
.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;
}
答案 0 :(得分:0)
如果您想在浏览器窗口更改大小时调整页面大小,可以使用媒体查询(只有现代浏览器支持此选项) - 或者您可以选择使用javascript(第三个选项都是)。但是你的问题表明你想避免使用javascript。我在下面用媒体查询做了一个例子。当您的屏幕尺寸介于800px和1000px之间时,将应用css。您可以组合这些语句,例如只需使用min或max即可。
@media all and (max-width: 1000px) and (min-width: 800px) {
.cb-slideshow li span {
/* css here*/
}
}
您可以使用媒体查询更改任何元素。它通常用于创建响应式设计。
答案 1 :(得分:0)
如果您正在寻找如何在窗口范围内设置身体,即使内容不足,请尝试
html, body{
width: 100%;
height: 100%
}
答案 2 :(得分:0)
您可以使用名为“响应式设计”的内容。它使用媒体查询根据屏幕分辨率进行调整。只需在任何热门搜索引擎中搜索响应式设计,您就可以从链接中学到很多东西。
现在您可以将此款式添加到您的身体
body {
width: 100%;
height: 100%;
}
这将使身体响应。
答案 3 :(得分:0)
快速举例,只需将其添加到您的页面,当页面低于960px时,整个身体就会消失
@media screen and(max-width:960px){
body{
display:none;
}
}
现在您可以添加适合所有尺寸的所需更改