我的.carousel div上有一个背景图像，在同一属性中，我具有线性渐变。另外，您创建此网站的人有多个CSS文件，而此处发布的文件不会为该网站的99％设置样式，因此对此感到抱歉。我还尝试了从在线图像复制链接/图像地址，以便您可以使用。但这也不起作用，希望您需要的所有代码
#carousel {
text-align:center;
position: relative;
display: flex;
flex-direction: column;
background: linear-gradient(rgba(155, 0, 150, 0.3), rgba(155, 0, 150, 0.3)), url(img/phone-slide.jpg);
}
#first-block, #second-block, #third-block, #fourth-block {
text-align:center;
padding:3.5rem 0;
}
#carousel {
text-align:center;
position: relative;
display: flex;
flex-direction: column;
background-image: url(https://images.pexels.com/photos/2419009/pexels-photo-2419009.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260), linear-gradient(#eb01a5, #d13531);
}
#carousel .header-img {
width: 100%;
}
.phrase-wrap {
position: absolute;
z-index: 1;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
color: white;
font-size: 3rem;
}
#first-block {
background:#fff;
}
#second-block {
background:#e5e5e5;
}
#third-block {
background:#fff;
}
#fourth-block {
background:#e5e5e5;
}
footer {
background:#fff;
padding:3.5rem 0;
}
@media screen and (max-width: 768px) {
.right {
float:none;
}
}<!DOCTYPE html>
<html lang="en-US">
<head>
<!-- <link rel="stylesheet" type="text/css" href="reset.css"> -->
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>
Gilbert Moving and Storage | Business and Residential Moving Services
</title>
<meta name="description" content="Gilbert Moving & Storage offers Residential and Business moving services. Based out of Gilbert AZ, we can service moves ranging from within the Phoenix valley to nationwide.">
<meta name="keywords" content="Gilbert Moving, Moving Services, AZ Moving Services, Residential Moving, Business Moving">
<link rel="stylesheet" href="css/components.css">
<link rel="stylesheet" href="css/icons.css">
<link rel="stylesheet" href="css/responsee.css">
<link rel="stylesheet" href="owl-carousel/owl.carousel.css">
<link rel="stylesheet" href="owl-carousel/owl.theme.css">
<!-- CUSTOM STYLE -->
<link rel="stylesheet" href="css/template-style.css">
<link href='http://fonts.googleapis.com/css?family=Open+Sans:400,300,600,700,800&subset=latin,latin-ext' rel='stylesheet' type='text/css'>
<script type="text/javascript" src="js/jquery-1.8.3.min.js"></script>
<script type="text/javascript" src="js/jquery-ui.min.js"></script>
<meta name="google-site-verification" content="sIiz7-Oic2Oz1NAPxWDTYSdWosvJHTekqTHo3fOoUmo" />
</head>
<body class="size-1140">
<!-- TOP NAV WITH LOGO -->
<header>
<nav>
<div class="line">
<div class="s-12 l-2">
<a href="index.html">
<img class="s-5 l-12 center" src="img/GilbertMoving_3e.png">
</a>
</div>
<div class="top-nav s-12 l-10 right">
<p class="nav-text">
Menu
</p>
<div class="phone">
<a href="tel:480-825-8648">
(480) 825-8648
</a>
</div>
<ul class="right">
<li>
<a href="/index.html">
Home
</a>
</li>
<li>
<a href="/gallery.html">
Gallery
</a>
</li>
<li>
<a>
Testimonials
</a>
</li>
<li>
<a href="/request-a-quote.html">
Request a Quote
</a>
</li>
</ul>
</div>
</div>
</nav>
</header>
<!-- CAROUSEL -->
<section>
<div id="carousel">
<!-- <img src="img/phone-slide.jpg" alt="header-img" class="header-img"> -->
<div class="phrase-wrap">
<div class="phrase">Here's some kind catchy phrase for yah.</div>
<div class="quote-btn">Get a quote</div>
</div>
<!-- <div id="owl-demo" class="owl-carousel owl-theme">
<div class="item">
<img src="img/truck4.jpg" alt="Residential and Business Moving Services">
<div class="line">
<h2>
Residential & Business Moving Services
</h2>
</div>
</div>
<div class="item">
<img src="img/packed-truck-slide.jpg" alt="Moving Services in Gilbert AZ">
<div class="line">
<h2>
Expert Packing & Care
</h2>
</div>
</div>
<div class="item">
<img src="img/phone-slide.jpg" alt="Moving Services Free Quote">
<div class="line">
<h2>
Call Today for a Free Quote -
<a href="tel:480-825-8648">
(480) 825-8648
</a>
</h2>
</div>
</div>
</div> -->
</div>
<!-- FIRST BLOCK -->
<div id="first-block">
<div class="line">
<div class="margin">
<div class="s-12 m-6 l-3 margin-bottom">
<i class="icon-message icon3x"></i>
<h2>
About Us
</h2>
<p>
Gilbert Moving & Storage is a family owned and operated business that takes Honesty, Integrity and reliability very seriously. Located in downtown Gilbert, we operate mostly throughout the Phoenix metro area and serve all of Arizona.
</p>
</div>
<div class="s-12 m-6 l-3 margin-bottom">
<i class="icon-star icon3x"></i>
<h2>
Our Promise
</h2>
<p>
Providing our customers with all of their Residential & Commercial moving needs. We will try our best to make your next move as painless and as stress-free as possible. Our Promise to you is that you will always be met with hard working, reliable, and professional movers.
</p>
</div>
<div class="s-12 m-6 l-3 margin-bottom">
<i class="icon-paperplane_ico icon3x"></i>
<h2>
Services
</h2>
<p>
- Local and Long Distance
<br /> - Commercial or Residential
<br /> - Packing/Unpacking Your Items
<br /> - Loading/Unloading PODS
<br /> - Load/Unload Assistance
<br />
</p>
</div>
<div class="s-12 m-6 l-3 margin-bottom">
<i class="icon-mail icon3x"></i>
<h2>
Contact
</h2>
<p>
We will be happy to answer any questions or concerns you may have about our services or the moving process. Call us at
<a href="tel:480-825-8648">
(480) 825-8648
</a>
or
<a href="/request-a-quote.html">
click here
</a>
to request a quote online.
</p>
</div>
</div>
</div>
</div>
<!-- SECOND BLOCK -->
<div id="second-block">
<div class="line">
<div class="margin-bottom">
<div class="margin">
<article class="s-12 m-12 l-8 center">
<h1>
Helping You Move Forward
</h1>
<p>
Gilbert Moving & Storage offers services at an affordable price. Just tell us about your moving needs and we will provide you with quality service that you and your family can count on. You can submit a quote either online by
<a href="/request-a-quote.html">
clicking here
</a>
, or you can contact us by phone at
<a href="tel:480-825-8648">
(480) 825-8648
</a>.
</p>
</article>
</div>
</div>
</div>
</div>
<!-- GALLERY -->
<div id="third-block">
<div class="line">
<h2>
Serving Arizona Residents & Businesses
</h2>
<div class="margin">
<div class="s-12 m-6 l-3">
<img class="margin-bottom" src="img/TruckLoad.JPG">
</div>
<div class="s-12 m-6 l-3">
<img class="margin-bottom" src="img/supplies.jpg">
</div>
<div class="s-12 m-6 l-3">
<img class="margin-bottom" src="img/pad.jpg">
</div>
<div class="s-12 m-6 l-3">
<img class="margin-bottom" src="img/boxes2.jpg">
</div>
</div>
</div>
</div>
<!-- Review Links -->
<div id="fourth-block">
<div class="line">
<h2>
Leave us a Review
</h2>
<div class="margin">
<div class="s-12 m-6 l-4">
<a href="https://www.google.com/search?q=Gilbet+Moving+%26+Storage+Mesa+AZ&oq=Gilbet+Moving+%26+Storage+Mesa+AZ&aqs=chrome..69i57.11701j0j1&sourceid=chrome&ie=UTF-8#q=Gilbert%20Moving%20%26%20Storage%20Mesa%20AZ&tbs=lf_od:-1,lf_oh:-1,lf_pqs:EAE,lf:1,lf_ui:3&rflfq=1&rlha=0&rllag=33380742,-111701127,8192&tbm=lcl&rldimm=2587546689305519927&lrd=0x872bb10b64bd1fa1:0x23e8d00127cb2737,3," target="_blank">
<img class="margin-bottom" src="img/google-logo-3.png">
</a>
</div>
<div class="s-12 m-6 l-4">
<a href="https://www.yelp.com/biz/gilbert-moving-and-storage-mesa-2" target="_blank">
<img class="margin-bottom" src="img/Yelp-Logo-2.png">
</a>
</div>
<div class="s-12 m-6 l-4">
<a href="https://www.facebook.com/gilbertmoving/" target="_blank">
<img class="margin-bottom" src="img/facebook-logo-330-3.png">
</a>
</div>
</div>
</div>
</div>
</section>
<!-- FOOTER -->
<footer>
<div class="line">
<div class="s-12 l-6">
<p>
<span style="font-size: 10px;">
Copyright 2018, Gilbert Moving and Storage
</span>
</p>
</div>
<div class="s-12 l-6">
</div>
</div>
<!-- Google Analytics -->
<script>
(function(i, s, o, g, r, a, m) {
i['GoogleAnalyticsObject'] = r;
i[r] = i[r] || function() {
(i[r].q = i[r].q || []).push(arguments)
}, i[r].l = 1 * new Date();
a = s.createElement(o),
m = s.getElementsByTagName(o)[0];
a.async = 1;
a.src = g;
m.parentNode.insertBefore(a, m)
})(window, document, 'script', 'https://www.google-analytics.com/analytics.js', 'ga');
ga('create', 'UA-90548139-1', 'auto');
ga('send', 'pageview');
</script>
</footer>
<script type="text/javascript" src="js/responsee.js"></script>
<script type="text/javascript" src="owl-carousel/owl.carousel.js"></script>
<script type="text/javascript">
jQuery(document).ready(function($) {
$("#owl-demo").owlCarousel({
navigation: true,
slideSpeed: 300,
paginationSpeed: 400,
autoPlay: true,
singleItem: true
});
$("#owl-demo2").owlCarousel({
slideSpeed: 300,
autoPlay: true,
navigation: true,
pagination: true,
singleItem: true
});
});
</script>
</body>
</html>
flex-direction: column;
background-image: url(img/phone-slide.jpg), linear-gradient(#eb01a5, #d13531);
}
答案 0 :(得分：3)
它应该这样background: linear-gradient(rgba(155, 0, 150, 0.3), rgba(155, 0, 150, 0.3)), url(https://www.w3schools.com/bootstrap/la.jpg);
#carousel {
height: 100vh;
background: linear-gradient(rgba(155, 0, 150, 0.3), rgba(155, 0, 150, 0.3)), url(https://www.w3schools.com/bootstrap/la.jpg);
background-size: cover;
}<div id="carousel"></div>