css로 백그라운드만 돌리기

Programming/css

구차니 2018. 10. 10. 19:16

잘 안되네... (예제만은 잘됨.. 내꺼에는 안됨.. ㅠㅠ)

일단 핵심은 :before라는 슈도 태그 인듯..

(근데 난 d3로 svg 그리는데 zindex랑 꼬여서 영 안됨..)

body

{

font-family: arial, helvetica, freesans, sans-serif;

font-size: 100%;

color: #333;

background-color: #ddd;

}

{

font-size: 1.5em;

font-weight: normal;

margin: 0;

text-align: center;

padding-top: 1em;

}

#element2

{

width: 12em;

font-size: 2em;

text-align: center;

line-height: 5em;

margin: 3em auto;

border: 2px solid #666;

border-radius: 7px;

position: relative;

overflow: hidden;

}

#element2:before

{

content: "";

position: absolute;

width: 200%;

height: 200%;

top: -50%;

left: -50%;

z-index: -1;

background: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/123941/background.png) 0 0 repeat;

transform: rotate(45deg);

}