如何解决如何使 HTML 滑块成为网站的背景？
所以我制作了一个简单的 HTML 和 CSS 网站，背景图片当前设置为海洋图片。
这是这个网站的代码 HTML：
<!DOCTYPE html>
<html>
<head>
<title>Website1</title>
<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>
<header>
<div class="main">
<ul>
<li class="active"><a href="#">Home</a></li>
<li><a href="#">Cooking</a></li>
<li><a href="#">Writing</a></li>
<li><a href="#">Creative</a></li>
<li><a href="#">Photography</a></li>
</ul>
</div>
<div class="title">
<h1>Nila Palmo Ram</h1>
</div>
<div class="button">
<a href="#" class="btn">ARTICLES</a>
<a href="#" class="btn">ARTWORK</a>
</div>
</header>
</body>
</html>
CSS：
*{
margin: 0;
padding: 0;
font-family: Century Gothic; }
header{
background-image: url(../2.jpg);
height: 100vh;
background-size: cover;
background-position: center;
}
ul{
float: right;
list-style-type: none;
margin-top: 25px;
}
ul li{
display: inline-block;
}
ul li a{
text-decoration: none;
color: #fff;
padding: 5px 20px;
border: 1px solid transparent;
transition: 0.6s ease;
}
ul li a:hover{
background-color: #fff;
color: rgb(115,196,233);
}
ul li.active a{
background-color: #fff;
color: rgb(115,233);
}
.main{
max-width: 1200px;
margin: auto;
}
.title{
position: absolute;
top: 10%;
left: 20%;
transform: translate(-50%,-50%);
}
.title h1{
color: #fff;
font-size: 70px;
}
.button{
position: absolute;
top: 62%;
left: 50%;
transform: translate(-50%,-50%);
}
.btn{
border: 1px solid #fff;
padding: 10px 30px;
color: #fff;
text-decoration: none;
transition: 0.6s ease;
}
.btn:hover{
background-color: #fff;
color: rgb(115,233);
}
对于这个网站，我希望背景图片是一个显示三张图片的滑块。我已经单独构建了滑块。这是滑块的代码：
HTML：
<!DOCTYPE html>
<html>
<head>
<title>Website2</title>
<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>
<div class="slideshow-container">
<div class="mySlides fade">
<img src="1.png" style="width:100%">
<div class="text">Rustic wall decor out of reclaimed wood</div>
</div>
<div class="mySlides fade">
<img src="2.png" style="width:100%">
<div class="text">Make memorising easier with spaced repetition</div>
</div>
<div class="mySlides fade">
<img src="3.png" style="width:100%">
<div class="text">Stunning wall art using washi tape</div>
</div>
<a class="prev" onclick="plusSlides(-1)">❮</a>
<a class="next" onclick="plusSlides(1)">❯</a>
</div>
<br>
<script>
var slideIndex = 0;
showSlides();
function showSlides() {
var i;
var slides = document.getElementsByClassName("mySlides");
for(i = 0; i < slides.length; i++) {
slides[i].style.display = "none";
}
slideIndex++;
if(slideIndex > slides.length) {
slideIndex = 1
}
slides[slideIndex - 1].style.display = "block";
setTimeout(showSlides,2000); // Change image every 2 seconds
}
</script>
</body>
</html>
CSS：
* {
Box-sizing: content-Box;
}
body {
font-family: Verdana,sans-serif;
margin: 0
}
.mySlides {
display: none
}
img {
vertical-align: middle;
}
.slideshow-container {
max-width: 1000px;
position: relative;
margin: auto;
}
/* Caption text */
.text {
color: #ffffff;
font-size: 15px;
padding: 8px 12px;
position: absolute;
bottom: 8px;
width: 100%;
text-align: center;
}
/* Fading animation */
.fade {
-webkit-animation-name: fade;
-webkit-animation-duration: 10s;
animation-name: fade;
animation-duration: 10s;
}
@-webkit-keyframes fade {
from {
opacity: .4
}
to {
opacity: 1
}
}
@keyframes fade {
from {
opacity: .4
}
to {
opacity: 1
}
}
/* On smaller screens,decrease text size */
@media only screen and (max-width: 300px) {
.prev,.next,.text {
font-size: 11px
}
}
有人可以告诉我如何使图片滑块成为我网站的背景吗？ 谢谢！
解决方法
利用 position:absolute 并将容器 height 和 width 设置为 100%。 （我使用 vh 和 vw 来获取设备/视图的高度和宽度）。
我希望你能把它推进。干杯！！！
// no change here
var slideIndex = 0;
showSlides();
function showSlides() {
var i;
var slides = document.getElementsByClassName("mySlides");
for (i = 0; i < slides.length; i++) {
slides[i].style.display = "none";
}
slideIndex++;
if (slideIndex > slides.length) {
slideIndex = 1
}
slides[slideIndex - 1].style.display = "block";
setTimeout(showSlides,2000); // Change image every 2 seconds
}* {
box-sizing: content-box;
}
body {
font-family: Verdana,sans-serif;
margin: 0
}
.mySlides {
display: none;
/* added */
position: absolute;
left: 0;
top: 0;
height: 100vh;
width: 100vw;
}
/* added */
.mySlides img {
height: 100%;
width: 100%;
object-fit: cover;
}
.slideshow-container {
position: relative;
margin: auto;
}
/* Caption text */
.text {
color: #ffffff;
font-size: 15px;
padding: 8px 12px;
box-sizing: border-box;
position: absolute;
bottom: 20px;
width: 100%;
text-align: center;
}
/* Fading animation */
.fade {
-webkit-animation-name: fade;
-webkit-animation-duration: 10s;
animation-name: fade;
animation-duration: 10s;
}
@-webkit-keyframes fade {
from {
opacity: .4
}
to {
opacity: 1
}
}
@keyframes fade {
from {
opacity: .4
}
to {
opacity: 1
}
}
/* On smaller screens,decrease text size */
@media only screen and (max-width: 300px) {
.prev,.next,.text {
font-size: 11px
}
}<!-- image urls changed -->
<div class="slideshow-container">
<div class="mySlides fade">
<img src="https://images.unsplash.com/photo-1422246654994-34520d5a0340?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1950&q=80" style="width:100%">
<div class="text">Rustic wall decor out of reclaimed wood</div>
</div>
<div class="mySlides fade">
<img src="https://images.unsplash.com/photo-1523706120980-3f90ca135ad6?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1950&q=80" style="width:100%">
<div class="text">Make memorising easier with spaced repetition</div>
</div>
<div class="mySlides fade">
<img src="https://images.unsplash.com/photo-1578301978018-3005759f48f7?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1928&q=80" style="width:100%">
<div class="text">Stunning wall art using washi tape</div>
</div>
<a class="prev" onclick="plusSlides(-1)">❮</a>
<a class="next" onclick="plusSlides(1)">❯</a>
</div>版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。
