javascript - 如何在图像幻灯片上放置黑色叠加层
问题描述
我有一个用 js 制作的幻灯片(我没有附加),我想在图像上制作一个黑色叠加层,我尝试了很多方法,但没有任何东西对我有用。这是我的代码,任何人都可以帮助我。javascript 是只是将图像附加到每个跨度元素。我想要图像上方和文本下方的黑色透明覆盖。
<!DOCTYPE html>
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Fullscreen Background Image Slideshow with
CSS3 - A Css-only fullscreen background image slideshow" />
<meta name="keywords" content="css3, css-only, fullscreen, background,
slideshow, images, content" />
<meta name="author" content="Codrops" />
<link rel="shortcut icon" href="../favicon.ico">
<link rel="stylesheet" type="text/css" href="css/demo.css" />
<link rel="stylesheet" type="text/css" href="css/style4.css" />
<script type="text/javascript" src="js/modernizr.custom.86080.js"></script>
</head>
<body id="page">
<ul class="cb-slideshow">
<li><span></span><div><h3>Picture perfect Designs</h3></div></li>
<li><span>Image 02</span><div><h3>Perfect blend of Logic and creativity</h3></div></li>
<li><span>Image 03</span><div><h3>Have an idea? contact us</h3></div></li>
<li><span>Image 04</span><div><h3>Need a website for your buisness</h3></div></li>
<li><span>Image 05</span><div><h3>qui·e·tude</h3></div></li>
<li><span>Image 06</span><div><h3>re·lax·a·tion</h3></div></li>
</ul>
<div class="container">
<!-- Codrops top bar -->
<div class="codrops-top">
<span class="right">
</span>
<div class="clr"></div>
</div><!--/ Codrops top bar -->
</div>
</body>
</html>
<style>
.cb-slideshow, .cb-slideshow:after {
position: fixed;
width: 100%;
height: 100%;
top: 0px;
left: 0px;
z-index: 0;
}
.cb-slideshow:after {
content: '';
background: transparent url(../images/pattern.png) repeat top left;
}
.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;
}
.cb-slideshow li div {
z-index: 1000;
position: absolute;
bottom: 30px;
left: 0px;
width: 100%;
text-align: center;
opacity: 0;
-webkit-animation: titleAnimation 36s linear infinite 0s;
-moz-animation: titleAnimation 36s linear infinite 0s;
-o-animation: titleAnimation 36s linear infinite 0s;
-ms-animation: titleAnimation 36s linear infinite 0s;
animation: titleAnimation 36s linear infinite 0s;
}
.cb-slideshow li div h3 {
font-family: 'BebasNeueRegular', 'Arial Narrow', Arial, sans-serif;
font-size: 240px;
padding: 0;
line-height: 200px;
color: white;
}
.cb-slideshow li:nth-child(1) span {
background-image: url(../images/1.jpg);
opacity: 0.9;
}
.cb-slideshow li:nth-child(2) span {
background-image: url(../images/2.jpg);
-webkit-animation-delay: 6s;
-moz-animation-delay: 6s;
-o-animation-delay: 6s;
-ms-animation-delay: 6s;
animation-delay: 6s;
}
.cb-slideshow li:nth-child(3) span {
background-image: url(../images/3.jpg);
-webkit-animation-delay: 12s;
-moz-animation-delay: 12s;
-o-animation-delay: 12s;
-ms-animation-delay: 12s;
animation-delay: 12s;
}
.cb-slideshow li:nth-child(4) span {
background-image: url(../images/4.jpg);
-webkit-animation-delay: 18s;
-moz-animation-delay: 18s;
-o-animation-delay: 18s;
-ms-animation-delay: 18s;
animation-delay: 18s;
}
.cb-slideshow li:nth-child(5) span {
background-image: url(../images/5.jpg);
-webkit-animation-delay: 24s;
-moz-animation-delay: 24s;
-o-animation-delay: 24s;
-ms-animation-delay: 24s;
animation-delay: 24s;
}
.cb-slideshow li:nth-child(6) span {
background-image: url(../images/6.jpg);
-webkit-animation-delay: 30s;
-moz-animation-delay: 30s;
-o-animation-delay: 30s;
-ms-animation-delay: 30s;
animation-delay: 30s;
}
.cb-slideshow li:nth-child(2) div {
-webkit-animation-delay: 6s;
-moz-animation-delay: 6s;
-o-animation-delay: 6s;
-ms-animation-delay: 6s;
animation-delay: 6s;
}
.cb-slideshow li:nth-child(3) div {
-webkit-animation-delay: 12s;
-moz-animation-delay: 12s;
-o-animation-delay: 12s;
-ms-animation-delay: 12s;
animation-delay: 12s;
}
.cb-slideshow li:nth-child(4) div {
-webkit-animation-delay: 18s;
-moz-animation-delay: 18s;
-o-animation-delay: 18s;
-ms-animation-delay: 18s;
animation-delay: 18s;
}
.cb-slideshow li:nth-child(5) div {
-webkit-animation-delay: 24s;
-moz-animation-delay: 24s;
-o-animation-delay: 24s;
-ms-animation-delay: 24s;
animation-delay: 24s;
}
.cb-slideshow li:nth-child(6) div {
-webkit-animation-delay: 30s;
-moz-animation-delay: 30s;
-o-animation-delay: 30s;
-ms-animation-delay: 30s;
animation-delay: 30s;
}
/* Animation for the slideshow images */
@-webkit-keyframes imageAnimation {
0% {
opacity: 0;
-webkit-animation-timing-function: ease-in;
}
8% {
opacity: 1;
-webkit-transform: scale(1.05);
-webkit-animation-timing-function: ease-out;
}
17% {
opacity: 1;
-webkit-transform: scale(1.1);
}
25% {
opacity: 0;
-webkit-transform: scale(1.1);
}
100% {
opacity: 0
}
}
@-moz-keyframes imageAnimation {
0% {
opacity: 0;
-moz-animation-timing-function: ease-in;
}
8% {
opacity: 1;
-moz-transform: scale(1.05);
-moz-animation-timing-function: ease-out;
}
17% {
opacity: 1;
-moz-transform: scale(1.1);
}
25% {
opacity: 0;
-moz-transform: scale(1.1);
}
100% {
opacity: 0
}
}
@-o-keyframes imageAnimation {
0% {
opacity: 0;
-o-animation-timing-function: ease-in;
}
8% {
opacity: 1;
-o-transform: scale(1.05);
-o-animation-timing-function: ease-out;
}
17% {
opacity: 1;
-o-transform: scale(1.1);
}
25% {
opacity: 0;
-o-transform: scale(1.1);
}
100% {
opacity: 0
}
}
@-ms-keyframes imageAnimation {
0% {
opacity: 0;
-ms-animation-timing-function: ease-in;
}
8% {
opacity: 1;
-ms-transform: scale(1.05);
-ms-animation-timing-function: ease-out;
}
17% {
opacity: 1;
-ms-transform: scale(1.1);
}
25% {
opacity: 0;
-ms-transform: scale(1.1);
}
100% {
opacity: 0
}
}
@keyframes imageAnimation {
0% {
opacity: 0;
animation-timing-function: ease-in;
}
8% {
opacity: 1;
transform: scale(1.05);
animation-timing-function: ease-out;
}
17% {
opacity: 1;
transform: scale(1.1);
}
25% {
opacity: 0;
transform: scale(1.1);
}
100% {
opacity: 0
}
}
/* Animation for the title */
@-webkit-keyframes titleAnimation {
0% {
opacity: 0;
-webkit-transform: translateY(200px);
}
8% {
opacity: 1;
-webkit-transform: translateY(0px);
}
17% {
opacity: 1;
-webkit-transform: scale(1);
}
19% {
opacity: 0
}
25% {
opacity: 0;
-webkit-transform: scale(10);
}
100% {
opacity: 0
}
}
@-moz-keyframes titleAnimation {
0% {
opacity: 0;
-moz-transform: translateY(200px);
}
8% {
opacity: 1;
-moz-transform: translateY(0px);
}
17% {
opacity: 1;
-moz-transform: scale(1);
}
19% {
opacity: 0
}
25% {
opacity: 0;
-moz-transform: scale(10);
}
100% {
opacity: 0
}
}
@-o-keyframes titleAnimation {
0% {
opacity: 0;
-o-transform: translateY(200px);
}
8% {
opacity: 1;
-o-transform: translateY(0px);
}
17% {
opacity: 1;
-o-transform: scale(1);
}
19% {
opacity: 0
}
25% {
opacity: 0;
-o-transform: scale(10);
}
100% {
opacity: 0
}
}
@-ms-keyframes titleAnimation {
0% {
opacity: 0;
-ms-transform: translateY(200px);
}
8% {
opacity: 1;
-ms-transform: translateY(0px);
}
17% {
opacity: 1;
-ms-transform: scale(1);
}
19% {
opacity: 0
}
25% {
opacity: 0;
-webkit-transform: scale(10);
}
100% {
opacity: 0
}
}
@keyframes titleAnimation {
0% {
opacity: 0;
transform: translateY(200px);
}
8% {
opacity: 1;
transform: translateY(0px);
}
17% {
opacity: 1;
transform: scale(1);
}
19% {
opacity: 0
}
25% {
opacity: 0;
transform: scale(10);
}
100% {
opacity: 0
}
}
/* Show at least something when animations not supported */
.no-cssanimations .cb-slideshow li span {
opacity: 1;
}
@media screen and (max-width: 1140px) {
.cb-slideshow li div h3 {
font-size: 100px
}
}
@media screen and (max-width: 600px) {
/* .cb-slideshow li div h3 { font-size: 50px }*/
.cb-slideshow li div h3 {
font-size: 30px
}
}
</style>
解决方案
我认为你不希望覆盖在所有内容之上意味着你想要一个图像,一些文本内容必须在它之上,并且在这两者之间你想要一个覆盖。如果是这种情况,那么您必须更改 li 的内部结构。
- 首先将 div 与文本内容放在一起。(在您的情况下,您使用的是标题标签)
- 其次将新的 div 与类叠加,并将叠加类的样式背景颜色设置为 rgba(0,0,0,0.7)
- 最后,放置图像标签。
此解决方案的问题是您必须创建与图像数量一样多的叠加 div。
但是,如果您想覆盖所有内容,则只能在具有相同 css 属性的 ul 标记之前添加新 div。
0.7 是 alpha 值,您可以在 0-1 之间更改它以用于不同的叠加暗等级。
推荐阅读
- python - 如何将数据框转换为宽格式?
- wordpress - 如何在 Wordpress DB 中解码预订日期
- css - 使用css在pdf中显示页面计数器
- javascript - Quill.js 链接格式是如何实现的?
- python - 使用 pandas.read_excel() 读取多张工作表时指定多个转换器字典
- laravel - Laravel - 如何将可为空的参数传递给中间件?
- ms-access - 如何恢复 Microsoft Jet DB 的密码?
- string - 如何更改 .csv 数据 Kotlin 中数字的格式
- r - R `as.numeric` 将所有值更改为 NA
- c# - C# Entity Framework Core 在 GET 请求中返回太多相关实体