如何在視差滾動圖像上放置文本

我試圖在網站上的圖像上顯示標題。這裏有一個小提琴：如何在視差滾動圖像上放置文本

我試圖通過創建ID頭，如標題來解決這個問題：

<h2 id="header">Text</h2>

和風格這是絕對帶有的z-index以確保它顯示在頂等：

#header{ 
    position: absolute; 
    z-index: 1000; 
    top: 200px; 
    left: 200px; 
}

我假定這將導致定位在遍佈元件的頂部的標題，位於從文檔的邊緣。但是，我沒有得到理想的結果。我會如何去做這件事？另外，我昨天晚上看到，使用浮點數通常比定位更好。不知道這是否適用於這種情況，或者它是否屬實。如果有人可以稱重，我將不勝感激。

來源

2017-04-05 natem1270

您必須調整HTML內容的結構，以便您#header位於.parallax之前。您想要使用的風格：

.parallax{ 
 
    background-image: url("https://images.pexels.com/photos/349608/pexels-photo-349608.jpeg?w=1260&h=750&auto=compress&cs=tinysrgb"); 
 
    min-height: 500px; 
 
    background-attachment: fixed; 
 
    background-position: center; 
 
    background-repeat: no-repeat; 
 
    background-size: cover; 
 
    margin: 0; 
 
} 
 

 
#header{ 
 
    position: absolute; 
 
    z-index: 1000; 
 
    top: 200px; 
 
    left: 200px; 
 
} 
 

 
.text-box{ 
 
\t height: 600px; 
 
\t padding: 50px; 
 
} 
 
@media only screen and (max-device-width: 1024px) { 
 
    .parallax { 
 
     background-attachment: scroll; 
 
    } 
 
} 
 

 
.navbar { 
 
    margin-bottom: 0 !important; 
 
}

<title>Bootstrap Default Template</title> 
 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 
<body> 
 
<h1 id="header">Text</h1> 
 
<div class="parallax"></div> 
 
<div class="col-lg-12 text-box text-center"> 
 
<h1>Restauraunt Heading</h1> 
 
</div> 
 
</body>

來源

2017-04-05 16:12:06

你.paralax類還需要添加位置屬性作爲relate或absolute。您還可以設置z-index: 0

啊，而且z-index: 1是足夠多的頭:)

來源

2017-04-05 16:18:46 Ula

您需要更改position: absolute到position: fixed。絕對定位將使元素相對於其父容器。固定位置相對於文檔主體。相對定位（position: relative）將其相對於它自然落在DOM流中的位置。

Fiddle here

來源

2017-04-05 16:27:02 sn3ll

另一種解決方案是簡單地把你的h1成paralax格...

.parallax{ 
 
    background-image: url("https://images.pexels.com/photos/349608/pexels-photo-349608.jpeg?w=1260&h=750&auto=compress&cs=tinysrgb"); 
 
    min-height: 500px; 
 
    background-attachment: fixed; 
 
    background-position: center; 
 
    background-repeat: no-repeat; 
 
    background-size: cover; 
 
    margin: 0; 
 
    position:relative; 
 

 
} 
 
.text-box{ 
 
\t height: 600px; 
 
\t padding: 50px; 
 
} 
 
@media only screen and (max-device-width: 1024px) { 
 
    .parallax { 
 
     background-attachment: scroll; 
 
    } 
 
} 
 
#header{ 
 
position: absolute; 
 
    top: 50%; 
 
    -webkit-transform: translateY(-50%); 
 
    -ms-transform: translateY(-50%); 
 
    transform: translateY(-50%); 
 
} 
 
.navbar { 
 
    margin-bottom: 0 !important; 
 
}

<title>Bootstrap Default Template</title> 
 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 
<body> 
 
<div class="parallax"><h1 id="header">Text</h1></div> 
 
<div class="col-lg-12 text-box text-center"> 
 
<h1>Restauraunt Heading</h1> 
 

 
</div> 
 
</body>

來源

2017-04-05 16:37:10

如何在視差滾動圖像上放置文本

回答

相關問題