# z-index를 이용한 이미지위에 글쓰기 > 그누보드가이드

본문 바로가기
사이트 내 전체검색

그누보드가이드

css # z-index를 이용한 이미지위에 글쓰기

페이지 정보

작성자 관리자 댓글 0건 조회 37회 작성일 18-01-01 11:27

본문

z-index를 이용하여 그림위에 텍스트를 쓰는 방법입니다. 

The z-index property specifies the stack order of an element.

An element with greater stack order is always in front of an element with a lower stack order.

Note: z-index only works on positioned elements (position:absolute, position:relative, or position:fixed).


<head>

<style>

#container {

  width: 850px;

  height: 500px;

  position: relative;

  background-color:cornsilk;

  opacity: ;

}

img {

    position: absolute;

    left: 0px;

    top: 0px;

    z-index: -1;

opacity:0.7;

padding-left: 30px;

}

#kim{font-size: 50px;

padding-left: 40px;}

</style>

</head>


<body>

<div id ="container">

<h1 id="kim">Kimchulyong is the best!</h1>

<img src="images/800_450.png">

</div>

</body>

추천0
  • 트위터로 보내기
  • 페이스북으로 보내기
  • 구글플러스로 보내기

댓글목록

등록된 댓글이 없습니다.

회원로그인

설문조사

그누보드5로 홈페이지제작이 좋다

접속자집계

오늘
30
어제
59
최대
77
전체
2,636

그누보드5
Copyright © 소유하신 도메인. All rights reserved.