文字不会出现在Z-index之后的图片前面
Text doesn't appear in front of Picture after Z-index
我想在一些图片前面加一个文本标签:http://codepen.io/jzhang172/pen/YXoWZa
$(function(){
var aud = document.getElementById("audio");
aud.volume = 0.01;
$( "i" ).click(function() {
var elementheight= document.querySelector(".overlay").offsetHeight;
console.log(elementheight);
if(elementheight == 430)
{
$( "p.more" ).fadeToggle( "slow" );
$(".overlay").animate({
height:"-=50"
},800);
}
else{
$(".overlay").animate({
height:"+=50"
},800);
setTimeout(function(){
$( "p.more" ).fadeToggle( "slow" );
},1000);
}
}); //End .click
//Check if element exists
/*if ($('.overlay').length > 0) {
console.log(".overlay".length);
}*/
});
/* Shared
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.button {
border-radius: 100px;
}
/* Sections
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.section {
padding: 8rem 0 7rem;
text-align: center;
}
.section-heading,
.section-description {
margin-bottom: 1.2rem;
}
/* Hero
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.phones {
position: relative;
}
.phone {
position: relative;
max-width: 80%;
margin: 3rem auto -12rem;
}
.phone + .phone {
display: none;
}
/* Values
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.values {
background-image: url('../img/values-bg.jpg');
background-size: cover;
color: #fff;
padding-bottom: 5rem;
}
.value-multiplier {
margin-bottom: .5rem;
color: #11DFC7;
}
.value-heading {
margin-bottom: .3rem;
}
.value-description {
opacity: .8;
font-weight: 300;
}
/* Help
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.get-help {
border-bottom: 1px solid #ddd;
}
/* Categories
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.categories {
background-image: url('../img/values-bg.jpg');
background-size: cover;
color: #fff;
}
.categories .section-description {
margin-bottom: 4rem;
}
/* Bigger than 550 */
@media (min-width: 550px) {
.section {
padding: 12rem 0 11rem;
}
.hero {
padding-bottom: 12rem;
text-align: left;
height: 165px;
}
.phone {
position: absolute;
top: -7rem;
right: 3rem;
max-height: 362px;
z-index: 3;
}
.phone + .phone {
top: -6rem;
display: block;
max-width: 73.8%;
right: 0;
z-index: 2;
max-height: 338px;
}
.hero-heading {
font-size: 2.4rem;
z-index:100;
}
}
/* Bigger than 750 */
@media (min-width: 750px) {
.hero {
height: 190px;
}
.hero-heading {
font-size: 2.6rem; z-index:100;
}
.section {
padding: 14rem 0 15rem;
}
.hero {
padding: 16rem 0 14rem;
}
.section-description {
max-width: 60%;
margin-left: auto;
margin-right: auto;
}
.phone {
top: -14rem;
right: 5rem;
max-height: 510px;
}
.phone + .phone {
top: -12rem;
max-height: 472px;
}
.categories {
padding: 15rem 0 8rem;
}
}
/* Bigger than 1000 */
@media (min-width: 1000px) {
.section {
padding: 20rem 0 19rem;
}
.hero {
padding: 22rem 0;
}
.hero-heading {
font-size: 3.0rem; z-index:100;
}
.phone {
top: -16rem;
max-height: 615px;
}
.phone + .phone {
top: -14rem;
max-height: 570px;
}
}
.container .row .one-half.column.phones{
width:700px;
margin-left:350px;
margin-top:-100px;
}
.tint.two{
position: absolute;
left:110px;
top: -250px;
z-index:1;
}
.tint{
position:relative;
width:500px;
height:400px;
cursor: pointer;
box-shadow: rgba(0,0,0,.2) 3px 5px 5px;
overflow:hidden;
z-index:6;
}
.tint.first{
position:relative;
bottom:100px;
left:50px;
}
.tint img{
height:100%;
width:100%;
transition: all 1s ease;
}
.tint:before{
content: "";
display: block;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
background: rgba(210, 232, 232, 0.24);
transition: all .3s linear;
}
.tint.one{
position: absolute;
right: -100px;
top: -200px;
z-index:5;
overflow:hidden;
}
.tint.one img{
left:-50px;
width:600px;
}
.tint.one:before {
content: "";
display: block;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
background: rgba(210, 232, 232, 0.24);
transition: all .3s linear;
}
.tint:hover:before, .tint.one:hover:before, .tint.two:hover:before
{
background: none; transform:scale(1.0);
-ms-transform:scale(1.0);
-moz-transform:scale(1.0);
-webkit-transform:scale(1.0);
-o-transform:scale(1.0);
}
.tint.first:hover img, .tint.one:hover img, .tint.two:hover img{
/* Making images appear bigger and transparent on mouseover */
cursor: pointer;
transform:scale(1.1);
-ms-transform:scale(1.1);
-moz-transform:scale(1.1);
-webkit-transform:scale(1.1);
-o-transform:scale(1.1);
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-o-transition: all 1s ease;
transition: all 1s ease;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="section hero">
<div class="container">
<div class="row">
<div class="one-half column">
<h4 class="hero-heading">
Start enjoying your Photographs Now. From anywhere.
</h4>
<a class="button button-primary" href=""target="_blank">Try it</a>
</div>
<div class="one-half column phones">
<a href="">
<div class="tint first">
<img src="http://img3.wikia.nocookie.net/__cb20140410195936/pokemon/images/archive/e/e1/20150101093317!025Pikachu_OS_anime_4.png">
</div>
</a>
<a href="">
<div class="tint one">
<img src="http://cdn.bulbagarden.net/upload/thumb/f/fb/143Snorlax.png/250px-143Snorlax.png">
</div>
</a>
<a href="">
<div class="tint two">
<img src="img/3.jpg">
</div>
</a>
</div>
</div>
</div>
</div>
从结果可以看出,部分文本被图片覆盖了。我尝试在诸如h4 css规则等地方添加z-index,但没有运气。我的理解是,css规则的定位有很大的关系与z-索引,但我添加位置:相对/绝对与我的z-索引,我仍然没有能够找到一个解决方案。感谢。
.hero-heading
工作的相对位置。像这样添加。
.hero-heading {
font-size: 2.4rem;
z-index: 100;
position: relative;
}
尝试将position:relative;
设置为'.hero-heading'
类,这样标题就相对于它的父容器。然后它将出现在图像的上方。
相关文章:
- electronic BrowserWindow的最小高度和宽度在hide()show()方法之后不起作用
- 如何在下面的ES6循环中获得前面的文本
- 在chrome.tabs.onCreated之后加载HTML页面
- 在Jquery detachment()和appendTo()之后定位元素
- AngularJS:ng之后,重复$scope值未按预期更新
- 为什么元素的宽度在页面加载之后和那一刻之后不同
- 没有在Angular应用程序中定义firebase(在firebase迁移之后)
- Javascript复选框函数:;缺少:在属性id之后"
- 下拉列表在使用z索引放置在前面后停止工作
- 在刚刚调用的append函数之后,jquery.height()不会返回实际值
- setTimeout函数能否在其前面的代码执行之前激发
- 正在链接添加了以下内容::在之后
- JQuery hide()在show()之后不起作用,反之亦然
- 未执行Ajax循环的Javascript之后的代码
- 如何在`window.open`之后执行回调
- 如何在一个元素动画之后延迟
- 在XMLHttpRequest之后重新初始化jQuery
- <text区域>在我的html中包含event.keycode==13之后,wrap就不起作用了
- 如何使用Javascript在给定的句子中找到大写单词并在其前面添加一个字符
- 文字不会出现在Z-index之后的图片前面