CSS 이미지 위치 지정

EDIT : 고정되어 있습니다. h1이 div 아래에 있기 때문입니다.CSS 이미지 위치 지정

학교 프로젝트를위한 웹 페이지를 만들었으므로이 성가신 문제가 계속 발생하여 페이지의 순서가 지정된 여러 카테고리로 된 이미지 갤러리를 여러 개의 미리보기 이미지로 만들려고합니다. 예 : 비디오 게임이기 때문에 영웅과지도처럼되어야합니다. 문제는 내가 이미지를 배치 할 때, 이미지가 화면의 맨 아래에있는 텍스트를 푸시합니다. 아마도 이것에 대한 간단한 해결책은 약간의 도움이 필요할 것입니다. 감사. here is the link

CSS :

@font-face { 
    font-family: bigNoodle; 
    src: url(Font/big_noodle_titling_oblique.ttf); 
} 

#splash { 

    z-index: 100; 
    position: absolute; 
    background: white url('Pictures/logo.png') center no-repeat; 
    top: 0; 
    right: 0; 
    left: 0; 
    bottom: 0; 
    font-family: bigNoodle; 
    color: #939393; 
    padding: 10px; 
    font-size: 40px; 


} 

body { 
    background: url('Pictures/bg.jpg') center fixed no-repeat; 

} 

h1 { 
    z-index: 1; 
    font-family: bigNoodle; 
    text-align: center; 
    text-transform: uppercase; 
    font-size: 60px; 
    color: #F99E1A; 
    padding-top: 10px; 
    margin: 0; 
    padding: 0; 

} 

div.picture img { 

    height: 200px; 



}

HTML :

이

<!DOCTYPE html> 
<html> 
<head> 
    <link rel="stylesheet" type="text/css" href="style.css"> 
    <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script> 
    <script type='text/javascript' src='anim.js'></script> 
    <title>Wiki</title> 
    <link rel="icon" type="image/x-icon" href="Pictures/logo.png" /> 
</head> 
<body> 
    <div id="splash">Click to continue...</div> 

<div class="picture"> 
    <img src="Pictures/Heroes.jpg"> 
</div> 

<h1>Welcome</h1> 
</body> 
</html>

출처

2016-08-11 Anonymous

의 배경으로 이미지를 가지고 코드를 게재 할 수 있습니까? 이미지 대신 텍스트가 나오는 대신에 당신이 원하는 것을 설명 할 수 있습니까? –

[좋은 질문하기] (http://stackoverflow.com/help/how-to-ask)에서 [mcve]를 포함하도록 편집하십시오. – Shaggy

텍스트가 페이지의 헤더이기 때문에 텍스트 아래에 이미지를 넣고 싶습니다. 페이지 중앙에 두 개의 나란히있는 이미지가있는 이미지도 있었으므로 이제 코드를 게시 할 것입니다 –

여러 가지 방법으로 그것을 달성 할 수

방법 1 :

당신은 텍스트

에 대한 Z- 인덱스를 적용 할 수 있습니다 예를 텍스트 '환영'에 대한

는 H1

h1 
{ 
z-index:999; 
}

방법 (2)의 내부에있다 : DIV

https://jsfiddle.net/ogyk1914/

출처

2016-08-11 12:30:08

그 자체로 z- 인덱스 아무것도하지 않을 것이다. –

Z- 색인은 위치에서만 작동합니다. 이것을 기억. –

CSS 이미지 위치 지정

답변

관련 문제