如何將文字放在正面並將圖像留在背景上？

這是我的第一個問題，閱讀並解決了我的問題與stackoverflow的社區。如何將文字放在正面並將圖像留在背景上？

我想把我的標題和副標題放在前面。我已經嘗試過使用z-index，但它仍然不起作用。感謝您的幫助。

這是代碼：https://codepen.io/gabrielacaesar/pen/gWyqJb?editors=1100

.container { 
 
    padding: 0; 
 
    max-width: 1500px; 
 
    margin: 0 auto; 
 
} 
 

 
.title { 
 
    height: 65vh; 
 
    background-image: url("images/alvoradaBetoBarataPR7maio2017.jpeg"); 
 
    background-size: cover; 
 
    background-position: center; 
 
    background-repeat: no-repeat; 
 
    display: flex; 
 
    flex-direction: column; 
 
    justify-content: top; 
 
} 
 

 
.grayscale { 
 
    filter: grayscale(95%); 
 
} 
 

 
.blur { 
 
    filter: blur(3px); 
 
} 
 

 
.grayscale.blur { 
 
    filter: blur(3px) grayscale(95%); 
 
    z-index: 5; 
 
} 
 

 
.title h1, 
 
.title h2 { 
 
    z-index: 666; 
 
    color: black; 
 
    text-align: center; 
 
    margin-top: 5px; 
 
} 
 

 
.title h1 { 
 
    font-size: 85px; 
 
    font-weight: 700; 
 
    font-family: 'Signika', Helvetica, sans-serif; 
 
} 
 

 
.title h2 { 
 
    font-size: 35px; 
 
    font-weight: 400; 
 
    font-family: 'Lato', Helvetica, sans-serif; 
 
} 
 

 
.title img { 
 
    object-fit: cover; 
 
    z-index: -666; 
 
}

<section class="container"> 
 
    <div class="title grayscale blur" alt="Foto: Beto Barata/Presidência da República - 7.maio.2017"> 
 
    <h1>alto escalão</h1> 
 
    <h2>os poderosos indicados pelo Palácio do Planalto</h2> 
 
    </div> 
 
</section>

來源

2017-05-27 agccaesar

在該CodePen中，您的文本位於前面。 https://codepen.io/anon/pen/GmLeZp?editors=1100 –

的Webkit模糊適用於容器中的一切，圍繞它的唯一辦法就是把圖像與模糊的絕對定位的容器在文本下方。看到這個筆：https://codepen.io/anon/pen/GmLeZp?editors=1100

PS：證明內容：頂部是無效的。

HTML

<section class="container"> 
    <div class="title grayscale blur" alt="Foto: Beto Barata/Presidência da República - 7.maio.2017"> 
    </div> 
<div class="content"> 
     <h1>alto escalão</h1> 
     <h2>os poderosos indicados pelo Palácio do Planalto</h2> 
</div> 
</section>

CSS

.title { 
    height: 65vh; 
    width: 100%; 
    background-image: url("https://static.pexels.com/photos/4164/landscape-mountains-nature-mountain.jpeg"); 
    background-size: cover; 
    background-position: center; 
    background-repeat: no-repeat; 
    display: flex; 
    flex-direction: column; 
    justify-content: top; 
    position: absolute; 
    z-index:0; 
} 

.grayscale { 
    filter: grayscale(95%); 
} 

.blur { 
    filter: blur(3px); 
} 

.grayscale.blur { 
    filter: blur(3px) grayscale(95%); 
} 

.content { 
    z-index: 100; 
    position: relative; 
} 
.content h1, .content h2 { 
    color: black; 
    text-align: center; 
    margin-top: 5px; 
    z-index: 100; 
} 

.content h1 { 
    font-size: 85px; 
    font-weight: 700; 
    font-family: 'Signika', Helvetica, sans-serif; 
} 

.content h2 { 
    font-size: 35px; 
    font-weight: 400; 
    font-family: 'Lato', Helvetica, sans-serif; 
} 

.title img { 
    object-fit: cover; 
}

來源

2017-05-27 03:43:26

Z-指數只有在同級別適用的標籤。像這樣的東西是不行的（因爲文字是在容器內）：

<container> 
    <text> 
    </text> 
</container> 

container { 
    z-index: -1; 
} 
text { 
    z-index: 1; 
}

好，像這樣的工作：

<container> 
</container> 
<text> 
</text> 

container { 
    position: absolute; 
    z-index: -1; 
} 
text { 
    position: absolute; 
    z-index: 1; 
}

因爲這兩個標籤是在同一水平線上。

來源

2017-05-27 04:02:50 bidipeppercrap

如何將文字放在正面並將圖像留在背景上？

回答

相關問題