主页 / 问题 / 877242
Accepted
Даша Новикова
Asked:2020-09-04 20:34:56 +0000 UTC2020-09-04 20:34:56 +0000 UTC

带有光滑滑块的背景图像滑块

  • 772

你能告诉我是否可以使用制作背景图像滑块slick slider？
谷歌没有帮助（文档说图像应该放在div一个块中。但是背景图像呢？

@charset utf-8;
html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,
abbr,acronym,address,big,cite,code,del,dfn,em,font,img,ins,kbd,q,s,samp,small,
strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,
legend,table,caption,tbody,tfoot,thead,tr,th,td{background: none repeat scroll 0
0 transparent; border: 0 none; font-size: 100%; outline: 0 none; vertical-align: 
baseline;margin: 0;padding: 0;}table{border-collapse: collapse;border-spacing: 0;}
address,article,aside,canvas,details,figcaption,figure,footer,header,hgroup,nav,
section,summary{display: block;}

* {
	-webkit-box-sizing:border-box;
	-moz-box-sizing:border-box;
	-ms-box-sizing:border-box;
	box-sizing:border-box;
}

a, a:hover, button, button:hover, .anime {
	-moz-transition:all 200ms linear;
	-ms-transition:all 200ms linear;
	-o-transition:all 200ms linear;
	-webkit-transition:all 200ms linear;
	transition:all 200ms linear;
	cursor: pointer;
}


.F_COL_C-START_I-CENTER {
	display: flex;
	flex-flow: column nowrap;
	justify-content: flex-start;
	align-items: center;
}

.F_ROW_C-START_I-CENTER {
	display: flex;
	flex-flow: row nowrap;
	justify-content: flex-start;
	align-items: center;
}

.F_ROW_C-S-B_I-F-S {
	display: flex;
	flex-flow: row nowrap;
	justify-content: space-between;
	align-items: flex-start;
}

.F_ROW_C-START_I-STRETCH {
	display: flex;
	flex-flow: row nowrap;
	justify-content: flex-start;
	align-items: stretch;
}

body {
	background-color: #fff;
	color: #413d4b;
	font-family:'Roboto', sans-serif;
	font-size: 0.87vmax;
	line-height: 1.37vmax;
}	

.wrap {
	width: 58.75vw;
	margin: 0 auto;
	position: relative; 
}

header {
	width: 100%;
	height: 100vh;
	background-image: linear-gradient(45deg, rgba(9, 5, 47, .85) 0%, rgba(49, 29, 94, .85)), url(../img/bg_header.jpg);
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center;
	overflow: hidden;
}

#top_header {
	display: flex;
	flex-flow: row nowrap;
	justify-content: space-between;
	align-items: center;
	margin-top: 3.2vh;
}

#logo svg{
	height: 3vw;
}

#top_header nav ul {
	display: flex;
	flex-flow: row nowrap;

}

nav li{
	list-style: none;
	text-transform: uppercase;
	color: #fff;
	font-family: 'Roboto Black', sans-serif;
	margin-left: 1.25vw;
}

nav a{
	text-decoration: none;
	font-weight: bold;
	color: #fff;
}

a:hover {
	color: #00e0d0;
}

#header_content {
	margin-top: 24.4vh;
}

#header_content h2{
	font-family: 'Playfair Display', serif;
	color: #fff;
	font-size: 2vw;
	text-align: center;
}

hr {
	border: none;
	width: 3.12vw;
	height: 1px;
	background-color: #00e0d0;
	color: #00e0d0;
	margin-top: 3.8vh;
}

#header_content p {
	width: 48.6vw;
	color: #fff;
	line-height: 3.5vh;
	text-align: center;
	margin-top: 4.17vh;
}

.btn {
	padding: 0.8vw 1.5vw;
	font-family: 'Hammersmith One', sans-serif;
	font-size: 1vw;
	color: #00e0d0;
	text-transform: uppercase;
	border: 1px solid #00e0d0;
	background-color: transparent;
	border-radius: 2px;
	margin-top: 7.3vh;
}

.btn:hover {
	color: #fff;
	border: 1px solid #fff;
}

#dot_nav{
	width: 3.43vw;
	display: flex;
	flex-flow: row nowrap;
	justify-content: space-between;
	align-items: flex-start;
	margin-top: 18.9vh; 

}

.circle_nav {
	width: 0.62vw;
	height: 0.62vw;
	border: 2px solid #bab9bc;
	background-color: transparent;
	border-radius: 0.62vw;

}

.circle_nav:hover {
	border: 2px solid #00e0d0;
	background-color: #00e0d0; 
}
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Landing Page</title>
	<link rel="stylesheet" href="css/style.css">
	<link rel="stylesheet" href="css/fonts.css">
	
</head>
<body>
	<header>
		<div class="wrap ">
			<div id="top_header">
				<div id="logo">
				</div>
				
				<nav>
					<ul>
						<li><a href="#">Home</a></li>
						<li><a href="#">About</a></li>
						<li><a href="#">Expertise</a></li>
						<li><a href="#">Teams</a></li>
						<li><a href="#">Works</a></li>
						<li><a href="#">People say</a></li>
						<li><a href="#">Contact</a></li>
					</ul>
				</nav>
			</div>

			<div id="header_content" class="F_COL_C-START_I-CENTER">

				<h2>We Are Awesome Creative Agency</h2>

				<hr />

				<p>This is Photoshop's version  of Lorem Ipsum. Proin gravida nibh vel velit auctor aliquet. Aenean sollicitudin, lorem quis bibendum auctor, nisi elit consequat ipsum, nec sagittis sem nibh id elit. Duis sed odio sit amet nibh vulputate cursus a sit amet mauris. Morbi accumsan ipsum velit.</p>
					
				<button class="btn" type="button">Learn More</button>
				
				<div id="dot_nav">
					<div class="circle_nav"></div>
					<div class="circle_nav"></div>
					<div class="circle_nav"></div>
					<div class="circle_nav"></div>
				</div>
			</div>
		</div>
	</header>
	

	
</body>
</html>

html

1 个回答

  1. Best Answer

    也许为什么不呢。对于幻灯片，css设置高度（如果没有内容）和背景。

    $('.slider').slick({
  arrows:false,
  dots:true,
  customPaging:function(){return ''}
})
    *{
  box-sizing:border-box;
}
body{
  margin:0;
}
.slide{
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;  
}
.slide.slick-slide{
  min-height:calc(100vh - 40px);
}
.slick-dots{
  margin:10px 0;
  padding:0;
  text-align:center;
}
.slick-dots li{
  display:inline-block;
  width:10px;
  height:10px;
  background-color:#000;
  opacity:.5;
  transition:all .2s ease;
  margin:0 5px;
  border-radius:50%;
}
.slick-dots .slick-active{
  opacity:1;
}
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.js"></script>
<link href="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.css" rel="stylesheet"/>

<div class="slider">
  <div class="slide" style="background-image:url(https://winzoro.net/uploads/posts/2012-07/1333997806_220817.jpg)"></div>  
  <div class="slide" style="background-image:url(https://thumbs.dreamstime.com/b/%D0%B1%D0%B5%D0%B7%D0%BC%D1%8F%D1%82%D0%B5%D0%B6%D0%BD%D0%BE%D1%81%D1%82%D1%8C-95803396.jpg)"></div>  
  <div class="slide" style="background-image:url(https://cs5.pikabu.ru/post_img/big/2015/09/14/10/1442252185_26762581.png)"></div>
</div>

    • 2

相关问题