【发布时间】：2019-10-31 09:04:09
【问题描述】：
所以我的标题中有我的主图像，其中一些文本居中，如下所示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 在代码 sn-p 中，我尝试添加 pexels.com 的 img，这样您就有了可以使用的图像，但未显示？我还注意到，当我隔离 html 中的轮播 div 和 css 中的#carousel 规则时，这是 sn-p 中的唯一代码。它工作正常吗？
#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>【问题讨论】：
标签： css