我试图让DIV上的两个背景图像以两种不同的不透明度进行动画制作，但它似乎不起作用。我愿意接受jQuery或JS解决方案，如果它更容易获得相同的结果。我只需要确保背景动画不会影响前景文字和图像。
CSS：
/*Header*/
.navbar-default .navbar-nav>li>a {
color: #777;
text-transform: uppercase;
}
.navbar-default .navbar-nav>li>a:hover{
color: #f74d65;
}
header{
background: url(../images/header_bg_2.png), url(../images/header_bg_1.png);
background-size: cover;
background-repeat: no-repeat;
animation-name: animateheader;
animation-duration: .6s;
animation-iteration-count: infinite;
animation-direction: alternate;
}
@-webkit-keyframes animateheader {
0% {
opacity: 1, opacity: 0 ;
}
30% {
opacity: .3, opacity: 1 ;
}
50% {
opacity: 0, opacity: 1 ;
}
100% {
opacity: 1, opacity: 1 ;
}
}
@-moz-keyframes animateheader {
0% {
opacity: 1, opacity: 0 ;
}
30% {
opacity: .3, opacity: 1 ;
}
50% {
opacity: 0, opacity: 1 ;
}
100% {
opacity: 1, opacity: 1 ;
}
}
@-o-keyframes animateheader {
0% {
opacity: 1, opacity: 0 ;
}
30% {
opacity: .3, opacity: 1 ;
}
50% {
opacity: 0, opacity: 1 ;
}
100% {
opacity: 1, opacity: 1 ;
}
}
@keyframes animateheader {
0% {
opacity: 1, opacity: 0 ;
}
30% {
opacity: .3, opacity: 1 ;
}
50% {
opacity: 0, opacity: 1 ;
}
100% {
opacity: 1, opacity: 1 ;
}
}
.section_overlay{
background: url(../images/header_bg_2.png);
background-size: cover;
background-repeat: no-repeat;
background-position: 50% 50px;
}
.home_text{
padding-top: 210px;
padding-bottom: 730px;
}
.home_text h2{
color: #010101;
font-size: 40px;
text-transform: uppercase;
letter-spacing: 13px;
}
.home_text p{
color: #404040;
font-size: 14px;
text-transform: uppercase;
}
.home_text img{}
.scroll_down{
padding-bottom: 50px;
}
.scroll_down h4{
font-size: 12px;
color: #000;
font-family: 'Montserrat', sans-serif;
text-transform: uppercase;
}
.section_overlay {
height: 100%;
background: url('../images/header_bg_2.png');
background-size: cover;
background-repeat: no-repeat;
}
HTML：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>MrCreeep - Let's Make it Creepy!</title>
<!-- Google Font -->
<link href='http://fonts.googleapis.com/css?family=Dosis:300,400,500,600,700,800' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Montserrat:400,700' rel='stylesheet' type='text/css'>
<!-- Font Awesome -->
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
<!-- Preloader -->
<link rel="stylesheet" href="css/preloader.css" type="text/css" media="screen, print"/>
<!-- Icon Font-->
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="css/owl.carousel.css">
<link rel="stylesheet" href="css/owl.theme.default.css">
<!-- Animate CSS-->
<link rel="stylesheet" href="css/animate.css">
<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<!-- Style -->
<link href="css/style.css" rel="stylesheet">
<!-- Responsive CSS -->
<link href="css/responsive.css" rel="stylesheet">
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="js/lte-ie7.js"></script>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<!-- Preloader -->
<div id="preloader">
<div id="status"> </div>
</div>
<header id="HOME" style="background-position: 50% 50px;">
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#"><img src="images/logo.png" alt=""></a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav navbar-right">
<li><a href="#HOME">Home</a></li>
<li><a href="#SERVICE">Services</a></li>
<li><a href="#ABOUT">About</a></li>
<li><a href="#TESTIMONIAL">Testimonial</a></li>
<li><a href="#WORK">Work</a></li>
<li><a href="#CONTACT">Contact</a></li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container -->
</nav>
<div class="container">
<div class="row">
<div class="col-md-12 text-center">
<div class="home_text wow fadeInUp animated">
<h2>it’s MrCreeep</h2>
<p>Tag Line would go Here</p>
<img src="images/shape.png" alt="">
</div>
</div>
</div>
</div>
</header>
<section class="about_us_area" id="ABOUT">
<div class="container">
<div class="row">
<div class="col-md-12 text-center">
<div class="about_title">
<h2>About Me</h2>
<img src="images/shape.png" alt="">
</div>
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-md-4 wow fadeInRight animated">
<p class="about_us_p">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Sed quia non numquam eius modi tempora.</p>
</div>
<div class="col-md-4 wow fadeInRight animated">
<p class="about_us_p">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Sed quia non numquam eius modi tempora.</p>
</div>
<div class="col-md-4 wow fadeInRight animated">
<p class="about_us_p">Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem.</p>
</div>
</div>
</div>
</section>
<section class="testimonial text-center wow fadeInUp animated" id="TESTIMONIAL">
<div class="container">
<div class="icon">
<i class="icon-quote"></i>
</div>
<div class="owl-carousel">
<div class="single_testimonial text-center wow fadeInUp animated">
<p>Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores<br/> eos qui ratione voluptatem sequi nesciunt.</p>
<h4>-JOHN DOE</h4>
</div>
<div class="single_testimonial text-center">
<p>Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius<br/> modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem.</p>
<h4>-JOHN SMITH</h4>
</div>
</div>
</div>
</section>
<div class="fun_facts">
<section class="header parallax home-parallax page" id="fun_facts" style="background-position: 50% -150px;">
<div class="container">
<div class="row">
<div class="col-md-6 wow fadeInLeft animated">
<div class="row">
<div class="col-md-4">
<div class="single_count">
<i class="glyphicon glyphicon-play"></i>
<h3><a class="ltwitch" href="http://www.twitch.tv/mrcreeep" data-tnick="mrcreeep">MrCreeep</a> (<span>...</span>)</h3>
<p>Watch Me Live</p>
</div>
</div>
</div>
</div>
<div class="col-md-5 col-md-offset-1 wow fadeInRight animated">
<div class="imac">
<img src="images/imac.png" alt="">
</div>
</div>
</div>
</div>
</section>
</div>
<section class="work_area" id="WORK">
<div class="container">
<div class="row">
<div class="col-md-12 text-center">
<div class="work_title wow fadeInUp animated">
<h1>Latest Works</h1>
<img src="images/shape.png" alt="">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna <br> aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex.</p>
</div>
</div>
</div>
</div>
<div class="container-fluid">
<div class="row">
<div class="col-md-4 no_padding">
<div class="single_image">
<img src="images/w1.jpg" alt="">
<div class="image_overlay">
<a href="">View Full Project</a>
<h2>drawing</h2>
<h4>with pencil colors</h4>
</div>
</div>
</div>
<div class="col-md-4 no_padding">
<div class="single_image">
<img src="images/w2.jpg" alt="">
<div class="image_overlay">
<a href="">View Full Project</a>
<h2>drawing</h2>
<h4>with pencil colors</h4>
</div>
</div>
</div>
<div class="col-md-4 no_padding">
<div class="single_image">
<img src="images/w3.jpg" alt="">
<div class="image_overlay">
<a href="">View Full Project</a>
<h2>drawing</h2>
<h4>with pencil colors</h4>
</div>
</div>
</div>
</div>
<div class="row pad_top">
<div class="col-md-4 no_padding">
<div class="single_image">
<img src="images/w4.jpg" alt="">
<div class="image_overlay">
<a href="">View Full Project</a>
<h2>drawing</h2>
<h4>with pencil colors</h4>
</div>
</div>
</div>
<div class="col-md-4 no_padding">
<div class="single_image">
<img src="images/w5.jpg" alt="">
<div class="image_overlay">
<a href="">View Full Project</a>
<h2>drawing</h2>
<h4>with pencil colors</h4>
</div>
</div>
</div>
<div class="col-md-4 no_padding">
<div class="single_image last_padding">
<img src="images/w6.jpg" alt="">
<div class="image_overlay">
<a href="">View Full Project</a>
<h2>drawing</h2>
<h4>with pencil colors</h4>
</div>
</div>
</div>
</div>
</div>
</section>
<section class="contact" id="CONTACT">
<div class="container">
<div class="row">
<div class="col-md-12 text-center">
<div class="contact_title wow fadeInUp animated">
<h1>get in touch</h1>
<img src="images/shape.png" alt="">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna<br/> aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex.</p>
</div>
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-md-3 wow fadeInLeft animated">
<div class="single_contact_info">
<h2>Call Me</h2>
<p>+88 00 123 456 01</p>
</div>
<div class="single_contact_info">
<h2>Email Me</h2>
<p>Hello@abdullahnoman.com</p>
</div>
<div class="single_contact_info">
<h2>Address</h2>
<p>216 Street Address, Barisal, BD</p>
</div>
</div>
<div class="col-md-9 wow fadeInRight animated">
<form class="contact-form" action="">
<div class="row">
<div class="col-md-6">
<input type="text" class="form-control" id="name" placeholder="Name">
<input type="email" class="form-control" id="email" placeholder="Email">
<input type="text" class="form-control" id="subject" placeholder="Subject">
</div>
<div class="col-md-6">
<textarea class="form-control" id="message" rows="25" cols="10" placeholder=" Message Texts..."></textarea>
<button type="button" class="btn btn-default submit-btn form_submit">SEND MESSAGE</button>
</div>
</div>
</form>
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-md-12 text-center">
<div class="work-with wow fadeInUp animated">
<h3>looking forward to hearing from you!</h3>
</div>
</div>
</div>
</div>
</section>
<footer>
<div class="container">
<div class="container">
<div class="row">
<div class="col-md-12 text-center">
<div class="footer_logo wow fadeInUp animated">
<img src="images/logo.png" alt="">
</div>
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-md-12 text-center wow fadeInUp animated">
<div class="social">
<h2>Follow Me on Here</h2>
<ul class="icon_list">
<li><a href="http://www.facebook.com/abdullah.noman99"target="_blank"><i class="fa fa-facebook"></i></a></li>
<li><a href="http://www.twitter.com/absconderm"target="_blank"><i class="fa fa-twitter"></i></a></li>
<li><a href=""><i class="fa fa-google-plus"></i></a></li>
<li><a href=""><i class="fa fa-linkedin"></i></a></li>
<li><a href="http://www.dribbble.com/abdullahnoman"target="_blank"><i class="fa fa-dribbble"></i></a></li>
</ul>
</div>
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-md-12 text-center">
<div class="copyright_text wow fadeInUp animated">
<p>© MrCreeep 2015.All Right Reserved By <a href="http://www.themeforest.net/user/thecodecafe"target="_blank">MrCreeep</a></p>
</div>
</div>
</div>
</div>
</div>
</footer>
<!-- =========================
SCRIPTS
============================== -->
<script src="js/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/jquery.nicescroll.js"></script>
<script src="js/owl.carousel.js"></script>
<script src="js/wow.js"></script>
<script src="js/script.js"></script>
</body>
</html>
网站：mrcreep.com
图片：
http://mrcreeep/images/header_bg_1.png
http://mrcreeep/images/header_bg_2.png
答案 0 :(得分：1)
一些伪元素是最佳的，不透明度可用于那些。
.wrap {
width: 250px;
height: 250px;
line-height: 250px;
text-align: center;
color: red;
margin: 1em auto;
border: 1px solid grey;
text-shadow: 0px 0px 4px white;
position: relative;
}
.wrap::before,
.wrap::after {
content: '';
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
background-size: contain;
background-position: center;
background-repeat: no-repeat;
}
.wrap::before {
background-image: url(http://www.queness.com/resources/images/png/apple_ex.png);
z-index: -2;
-webkit-animation: animateheader 3s infinite;
animation: animateheader 3s infinite;
}
.wrap::after {
background-image: url(https://upload.wikimedia.org/wikipedia/commons/6/66/Android_robot.png);
z-index: -1;
-webkit-animation: animateheader 5s infinite;
animation: animateheader 5s infinite;
}
@-webkit-keyframes animateheader {
0% {
opacity: 1;
}
30% {
opacity: .3;
}
50% {
opacity: 0;
}
100% {
opacity: 1;
}
}
@keyframes animateheader {
0% {
opacity: 1;
}
30% {
opacity: .3;
}
50% {
opacity: 0;
}
100% {
opacity: 1;
}
}<div class="wrap">
<h2>Heading</h2>
</div>