앵커 태그의 배경 이미지에 테두리를 지정하는 방법은 무엇입니까?

-1

앵커 태그의 배경 이미지 주위에 테두리를 지정하고 조정하려면 어떻게해야합니까? 너비와 높이가 미리 정의되어 있으므로 앵커 태그 테두리가 생겼습니다. 이 앵커 태그의 배경 이미지 인 "다음"및 "이전"주위에 경계를 지정할 수 있습니까 ??앵커 태그의 배경 이미지에 테두리를 지정하는 방법은 무엇입니까?

<!DOCTYPE html> 
<html> 
<head> 

<title>jQuery UI Dialog: Hide the Close Button/Title Bar</title> 

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> 
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/jquery-ui.min.js"></script> 

    <style type="text/css"> 

    .mySlider 
    { 
     // 
    } 

    .shadow_div 
    { 
     // 
    } 

    .mySlider img 
    { 
     width:800px; 
     height:480px; 
     display:none; 

    } 

    .Parent_Slider > a 
    { 
     text-decoration:none; 
     font-weight:bold; 
     width:32px; 
     height:32px; 
     position:absolute; 
     top:45%; 
     text-indent:-9999px; 
    } 

    .Next_Class 
    { 
     right:282px; 
     background-image:url(Images/rightarrow.jpg); 
     border:1px solid white; 
    } 

    .Prev_Class 
    { 
     left:282px; 
     background-image:url(Images/leftarrow.jpg); 
    } 

    ul.Round_Buttons 
    { 
     position:relative; 
     left:35%; 
     top:5px; 
     text-decoration:none; 
     list-style-type:none; 
     text-indent:-9999px 
    } 

    ul.Round_Buttons li 
    { 
     float:left; 
     background-color:white; 
     margin:1px 5px; 
     padding:0px 7px; 
     border-radius:50%; 
     border-width:1px; 
     border:1px solid #3610a5; 
     cursor:pointer; 
     box-shadow:1px -1px 3px 1px #3610a5; 
     transition:all 1s ease-in-out; 
     -moz-transition:all 1s ease-in-out; 
     -webkit-transition:all 1s ease-in-out; 

    } 

    ul.Round_Buttons li:hover 
    { 
     transform:rotate(-360deg); 
     -webkit-transform:rotate(-360deg); 
     -moz-transform:rotate(-360deg); 
    } 


</style> 

<script type="text/javascript"> 

    $(document).ready(function() { 
     // 


    }); 

</script> 
</head> 

<body> 
<div class="Parent_Slider"> 
    <div id="my_image_slider" class="mySlider"> 
     <img id="1" src="Images/bmw.jpg" alt="" title="Audi India"/> 
     <img id="2" src="Images/audi.jpg" alt="" title="BMW India" /> 
     <img id="3" src="Images/aston-martin.jpg" alt="" title="Aston-Martin APAC" /> 
     <img id="4" src="Images/bugatti.jpg" alt="" title="Buggatti APAC" /> 
     <img id="5" src="Images/koenigsegg.jpg" alt="" title="Koenigsegg APAC" /> 
    </div> 
    <a href="#" class="Next_Class">Next</a> 
    <a href="#" class="Prev_Class">Prev</a> 
</div> 
    <div class="shadow_div" > 
     <ul class="Round_Buttons"> 
      <li id="1st_Round"><a href="#">1</a></li> 
      <li id="2nd_Round"><a href="#">2</a></li> 
      <li id="3rd_Round"><a href="#">3</a></li> 
      <li id="4th_Round"><a href="#">4</a></li> 
      <li id="5th_Round"><a href="#">5</a></li> 
     </ul> 
    </div>

출처

2014-05-09 recmach

CSS를 사용하여이 작업을 수행 할 수 없습니다. 배경 이미지를 타겟팅 할 수 없으므로 ''요소가 텍스트 내용없이 배경 이미지 만 사용하거나 크기가 예상되는 경우가 아니면 이미지 편집 프로그램에 테두리를 추가해야합니다. 그러나 당신이 공유 한 정보로 우리는 말할 수 없습니다. 그리고 추측은 아무에게도 아무런 호의도주지 않습니다. –

자세한 내용을 입력하십시오. 예제 코드가 필요할 것이며 jsFiddle을 만들어 사람들이 응답하는 것을 도울 수 있습니다. – kapa

경우에 따라 다르므로 배경 이미지의 정확한 위치와 크기를 알고 있다면 몇 가지 해결책을 찾아야합니다. –

당신은 CSS로 배경 이미지에 테두리를 추가 할 수는 없지만 몇 가지 대안이 아마. 자세한 내용은없이 당신이 이미지의 크기를 알고있는 최적의 경로하지만 가정 말을 열심히, 당신은 단지 <a> 태그의 테두리를 설정하고 너비/높이가 이미지에 맞게 만들 수 :

a { 
    background:url(http://www.vision-call.co.uk/images/stories/events/sample.jpg); 
    border:3px solid red; 
    display:block;   
    height:315px; /*height of image*/ 
    width:420px; /*width of image*/ 
}

JSFiddle

을

JSFiddle 2

같은 I : 코드와 업데이트 된 질문을 바탕으로

업데이트, 나는 또 다른 바이올린을 만든 너. <a>의 크기가 이미지의 크기와 일치하며 테두리가 <a>에 적용되어 배경 이미지에 테두리가있는 것처럼 보입니다. 분명히, 내가 사용하고있는 이미지는 샘플이며 멋지지 않지만이 기술은 당신을 위해 작동해야합니다.

출처

2014-05-09 06:48:58

앵커 태그의 배경 이미지에 테두리를 지정하는 방법은 무엇입니까?

답변

관련 문제