所以我的主图像放在标题中，其中一些文本居中，如此处https://imgur.com/a/ONYSUtK所示，我只想在其上方放置一个透明的黑色层。我以为我会尝试像这样background: linear-gradient(rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.2)), url(img/phone-slide.jpg);
我看到图像但没有颜色？为什么会这样？我还尝试将父容器的背景设置为rgba值，并使用z-index在图像上对父容器进行分层，但这没有用。关于如何获得理想结果的任何想法？
p.s在代码片段中，我尝试添加了pexels.com的img，以便您可以使用图片，但图片未显示？我还注意到，当我在html中分离出carousel div并在css中分离出#carousel规则时，这是代码段中的唯一代码。可以吗？
#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: linear-gradient(rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.2)), url(https://images.pexels.com/photos/2346015/pexels-photo-2346015.jpeg?cs=srgb&dl=bay-beach-blue-2346015.jpg&fm=jpg);
}
#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>
答案 0 :(得分：0)
您需要指定background-size属性，建议您尝试像background-image这样在背景之后添加图像，并指定例如background-size：