배경 이미지 주위에 단추 배치

배경 이미지 주위에 여러 개의 링크 단추를 배치하고 싶습니다. 다음은 HTML입니다.배경 이미지 주위에 단추 배치

<body> 
    <div id="background"> 
     <div id="abt"><a href="pages/about.html" class="button-link" id="aboutus">About Us</a></div> 
     <div id="ofc"><a href="pages/office.html" class="button-link" id="office">Office</a></div> 
     <div id="staf"><a href="pages/staff.html" class="button-link" id="staff">Staff</a></div> 
     <div id="msg"><a href="pages/message.php" class="button-link" id="message">Message</a></div> 
    </div> 
</body>

고정되어 있기 위해 배경 주위에 배치하고 싶습니다.

예 : 귀하의 버튼으로 http://jsfiddle.net/kimonante/2cvz4/1/

body { 
    background:url(http://www.factoryoutletstores.info/img/usa-map.gif) no-repeat; 
    background-attachment:fixed; 
    /*fix the shit*/ 
    background-position:center; 
} 
.button-link { 
    -webkit-border-radius: 4px; 
    -moz-border-radius: 4px; 
    border-radius: 4px; 
    border: solid 1px #20538D; 
    text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.4); 
    -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 1px 1px rgba(0, 0, 0, 0.2); 
    -moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 1px 1px rgba(0, 0, 0, 0.2); 
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 1px 1px rgba(0, 0, 0, 0.2); 
    padding: 10px 25px; 
    background: #0d0f12; 
    color: #FFF; 
    font-family:arial; 
    font-weight:600; 
    display:block; 
} 
.button-link:hover, .button-link:focus { 
    background: #356094; 
    border: solid 1px #2A4E77; 
    text-decoration: none; 
} 
.button-link:active { 
    -webkit-box-shadow: inset 0 1px 4px rgba(0, 0, 0, 0.6); 
    -moz-box-shadow: inset 0 1px 4px rgba(0, 0, 0, 0.6); 
    box-shadow: inset 0 1px 4px rgba(0, 0, 0, 0.6); 
    background: #2E5481; 
    border: solid 1px #203E5F; 
} 
a { 
    text-decoration:none; 
    color:white; 
    width:100px; 
    text-transform:uppercase; 
    padding-left:18px; 
} 
#abt { 
    margin-left:540px; 
    margin-top:200px; 
} 
#ofc { 
    margin-left:160px; 
    margin-top:105px; 
} 
#msg { 
    margin-left:930px; 
    margin-top:-240px; 
} 
#staf { 
    margin-left:360px; 
    margin-top:260px; 
}

출처

2013-04-08 Kamal Tahir

여기에 실제 질문이 있으십니까? 당신에게 효과가없는 것은 무엇입니까? – Floris

이것은 거의 의미가 없지만, 나는 당신이 위치를 찾고 있다고 생각합니다 : 고정; 절대적이지 않다. – ghepting

는 픽셀 위치, 당신은 당신의 div#background 고정 된 크기로 설정 대신 신체의 div#background의 배경을 설정해야합니다.

배경 첨부 파일도 제거하십시오. 이 버전의 작동 방식 : http://jsfiddle.net/BTVZz/

출처

2013-04-08 03:06:08 Appleshell

감사의 남자지만 도움이되지 않았다 –

나는 일하는 바이올린을 추가했다. 약간의 포지셔닝이 필요했습니다. – Appleshell

우 감사합니다 사람 작동 : D 조 –

배경 이미지 주위에 단추 배치

답변

관련 문제