이미지를 텍스트 뒤에 놓고 CSS를 사용하여 가운데에 유지하십시오.

웹 페이지를 만들고 있습니다. 이미지가 있고, 중앙에 놓고 그 이미지 맨 위에 입력하고 싶습니다. 상자 및 레이블 및 제출 단추. 이미지를 텍스트 뒤에 놓고 CSS를 사용하여 가운데에 유지하십시오.

은 내가 CSS를

img.center 
{ 
    z-index:-1; 
}

을 사용하려고하지만이 일을하지 않습니다. 난하지만 난 left:0px 및 top:0px을 사용, 이미지 뒤에 갈 수 있도록 경우

img.center 
{ 
    position:absolute; 
    left:0px; 
    top:0px; 
    z-index:-1; 
}

에 코드를 변경할 때 ... 그것은 loaction 0,0 이미지를 넣습니다 ..하지만 난 이미지가 있고 싶어 가운데에.

이미지를 가운데에 유지하려면 <div align="center"> 태그가 있어야합니다.

어쨌든, 나는 중심에 이미지를 유지하고 너무 뒤에 가도록 할 수 있습니까 ??? (난 내 div 태그에 대한 배경 이미지를 가지고 노력 않았지만, 어떤 이미지가 이상이 나타나지 않음)

<html> 
<head> 
<title>Question of the Week</title> 
<style type="text/css"> 
    body 
    { 
     background-image:url('images/background.jpg'); 
     background-repeat:repeat-x; 
    } 

    .container 
    { 
    background-image:url('images/center.jpg'); 
    background-repeat:no-repeat; 
    } 
    td.cntr {padding-top:50px;} 
</style> 
</head> 
<body topmargin="0" leftmargin="0" rightmargin="0" bottommargin="0" marginwidth="0" marginheight="0"> 

    <table width="100%" border="0" cellpadding="0" cellspacing="0"> 
     <tr> 
      <table width="100%" border="0" cellpadding="0" cellspacing="0"> 
       <tr> 
        <td><div align="left"><img src="images/logo.jpg"></div></td> 
        <td></td> 
        <td><div align="right"><img src="images/right_logo.jpg"></div></td></tr> 
      </table> 
     </tr> 
     <tr> 
      <table width="100%" border="0" cellpadding="0" cellspacing="0"> 
       <tr> 
        <td class="cntr"> 
         <div id="container"> 
          <input name="box" type="textbox" /> 
          <input name="box" type="textbox" /> 
          <input name="submit" type="submit" /> 
         </div> 
        </td> 
       </tr> 
      </table> 
     </tr> 
    </table> 
</body> 
</html>

출처

2009-07-07 Zeeshan Rang

당신은 HTML 소스를 공유 할 수 있습니까? HTML이 어떻게 설정되는지는 CSS가 필요한 것에 큰 영향을 미칩니다. –

글쎄, 당신의 웹 사이트/컨테이너의 뒷 배경에 이미지를 올려 놓고 그 위에 원하는 것을 넣으십시오.

<div id="container"> 
    <input name="box" type="textbox" /> 
    <input name="box" type="textbox" /> 
    <input name="submit" type="submit" /> 
</div>

이 코드에있을이며 CSS과 같습니다 : 그래서 당신이 말이, 당신이 특정 값으로 지정된 높이와 폭을 가지고 있어야 그래도 작동하려면

#container { 
    background-image:url(yourimage.jpg); 
    background-position:center; 
    width:700px; 
    height:400px; 
}

(즉, 아니 % 님의) 당신이 필요하다면 좀 더 구체적으로 당신을 도울 수 있지만 더 많은 정보가 필요합니다.

출처

2009-07-07 18:39:24 Mike

이 코드보십시오 :

내 .html 중에서 페이지는 다음과 같습니다

body {z-index:0} 
img.center {z-index:-1; margin-left:auto; margin-right:auto}

을

왼쪽으로 & 오른쪽 여백을 자동으로 설정하면 이미지가 가운데에 맞춰집니다.

출처

2009-07-07 18:26:13

모든 브라우저가 올바르게 지원하지 않기 때문에 음수 Z 색인을 사용하지 마십시오. –

position:absolute 또는 position:relative으로 이미지와 텍스트를 배치 할 수 있습니다. 그러면 z-index property이 작동합니다. 예 :

#sometext { 
    position:absolute; 
    z-index:1; 

} 
image.center { 
    position:absolute; 
    z-index:0; 
}

가운데 정렬하고 싶은 방법을 사용하십시오.

또 다른 옵션/해킹은 전체 페이지 또는 텍스트 상자 내에서 이미지를 배경으로 만드는 것입니다.

출처

2009-07-07 18:30:34 anderstornvig

가운데에있는 배경 이미지로 만듭니다.

.wrapper {background:transparent url(yourimage.jpg) no-repeat center center;} 

<div class="wrapper"> 
...input boxes and labels and submit button here 
</div>

출처

2009-07-07 18:34:59 Emily

나는 당신의 코드를 시도했다. 그러나 그것은 작동하지 않았다. 내 코드로 내 질문을 편집했습니다 .. 제발 좀 봐 주 시겠어요 ... 다시 –

당신은 id = 'container'가 있지만 클래스 용 .container를 사용하고 있습니다. CSS의 html 또는 #container에서 class = 'container'를 사용하십시오. CSS의 background-position : center도 누락되었습니다. 위 예제 에서처럼 모든 배경 CSS를 한 줄에 넣을 수 있습니다. – Emily

당신이 이것에 짧게 변화 해 얻은 수치심) : –

-1부터 사용하지 말고 0에서 시작하여 위로 이동하십시오. 예를 들어, 입력 및 레이블이 포함 된 div를 100의 z- 인덱스로 설정하고 그 뒤에 배치 할 이미지의 Z- 인덱스를 50으로 설정하십시오.

또는 이미지를 배경 이미지로 설정하십시오 입력 및 레이블이 포함 된 div의 이미지는 아마도 설명 적이므로 프리젠 테이션이기 때문에 실제 img 요소 일 필요는 없습니다.

출처

2009-07-07 18:35:26 Rahul

두 가지 방법으로 문제를 해결할 수 있습니다. CSS

배경 이미지의

배경 이미지

사용하여 Z-index 속성은 아마 더 쉽다. 어딘가에 고정 폭이 필요합니다.

.background-image { 
    width: 400px; 
    background: url(background.png) 50% 50%; 
}

<div class=".background-image"><form></form></div>

출처

2012-04-04 20:16:13

이미지를 텍스트 뒤에 놓고 CSS를 사용하여 가운데에 유지하십시오.

답변

관련 문제