이미지 위에 div를 놓으십시오.

저는이 div를 이미지 위에 올려 놓으려고 시도한 새로운 솔루션에서 시도한 모든 해결책을 시도했습니다.이미지 위에 div를 놓으십시오.

우리는 배경 이미지가 있으며 아래 이미지에서 볼 수 있듯이 Eversoft, TruSoft, Solarmax 및 Active Family의 네 단어가 있습니다.

enter image description here

이 네 단어가 그림에있는 상자에 최대 이동해야합니다,하지만 난 CSS의 권리를 얻을 수 있습니다,이 내 페이지

<div class="row"> 
    <img src="~/Content/Images/Mobile-BackGround-new-2.png" class="img-responsive" style="position: relative" /> 
    <div id="stainMasterLinksContainer"> 
    <div id="stainMasterLinksTop"> 
     <a href='@Url.Action("Eversoft", "Eversoft")' style="color: #934991;" class="GothamFont" id="Eversoft"><b>EverSoft</b> <small><sup>®</sup></small></a> 
     <a href='@Url.Action("Trusoft", "Trusoft")' style="color: #f7acb7" class="GothamFont"><b>TruSoft</b> <small><sup>®</sup></small></a> 
    </div> 
    <div id="stainMasterLinksBottom"> 
     <a href='@Url.Action("Solarmax", "Solarmax")' style="color: #ffe600" class="GothamFont" id="Solarmax"><b>SolarMax</b> <small><sup>®</sup></small></a> 
     <a href='@Url.Action("ActiveFamily", "ActiveFamily")' style="color: #dc1e33" class="GothamFont" id="ActiveFamily"><b>Active Family</b> <small><sup>™</sup></small></a> 
    </div> 
</div>

을 구성하는 방법입니다 그리고 현재이 CSS를 stainMasterLinksContainer에 사용 중입니다.

#stainMasterLinksContainer { 
padding-top: -40%; 
font-size: 15.5px; 
position: relative; 
z-index: 100; 

}

도움이 될 것입니다.

출처

2015-01-14 Code Ratchet

즉석, 나는 하나의 문제를 볼 수 있습니다'padding'는 음수가 될 수 없습니다, 대신'margin'를 사용합니다. – Marcelo

이미지를 배경 이미지로 설정하지 않는 이유는 무엇입니까? – jmore009

@ jmore009 이미지로 div 배경을 설정해 보았지만 img-responsive를 사용할 수 없어 이미지가 휴대 전화에서 반응하지 않는 결과를 낳습니다. 이미지 주위에 흰색 테두리가 생기면 모바일에서 볼 때, 나는이 접근법으로 돌아와야 만 img-responsive를 사용할 수있다. –

할 수 있습니다. 여기에 한 가지 방법입니다 :

<img src="http://practicalaction.org/images/sea-of-ducks-300.jpg" style="position:absolute; left:0px; top:0px"/> 
 

 
<div style="background-color:blue;position:relative;left:80px; top:80px; width:50px;"> Hello</div>

출처

2015-01-14 23:26:29

하지만 이미지가 부모 DIV로 묶여 있다고 가정 해 봅시다.이 DIV 내부에서 위치를 포기하지 않을까요? – dangel

시도해 보지 않겠습니까? (나는 대답했다. 어쨌든 그것은 원래 질문의 일부가 아니 었습니다. –

나는 https://jsfiddle.net/dwqd5aot/을 시도했는데, 부모 DIV를 무너 뜨 렸으며, 포지셔닝을 포기했다. – dangel

이미지 위에 div를 놓으십시오.

답변

관련 문제