我似乎无法在 Safari 中显示背景图像。它适用于 IE 和 Chrome。我尝试了几个带有-webkit
前缀但没有骰子的替代方案。
<style type="text/css">
h1, h2, h3, h4, p {position: relative; z-index: 10;}
.jumbotron {
position: relative;
z-index: 3;
}
.jumbotron:after {
background: linear-gradient(rgba(255,255,255,1), rgba(255,255,255,.5)), url('img/carousel_island.png');
bottom: 0;
content: "";
display: block;
left: 0;
position: absolute;
right: 0;
top: 0;
z-index: 2;
}
</style>
这是HTML:
<!-- Main jumbotron for a primary marketing message or call to action -->
<div class="jumbotron">
<div class="container">
<h1><strong>Welcome to Pepi's Island</strong></h1>
<h3><strong>A place for kids to emotionally and socially learn and grow.</strong></h3>
<br>
<p><a class="btn btn-success btn-lg">Learn more »</a></p>
</div>
</div>