为什么我的线性渐变在我的图像上不起作用？
为什么我的线性渐变在我的图像上不起作用？
提问于 2019-06-18 02:25: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将父容器分层到图像上，但这不起作用。有什么办法可以让我得到想要的结果吗？
附注:在代码片段中，我尝试添加一个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>
回答 1
Stack Overflow用户
发布于 2019-06-18 04:45:00
您需要指定background-size属性，我建议您尝试像background-image那样在background之后添加图像，并指定例如background-size: contain；
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/56636910
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号