Question

如何在锚标记的背景图像周围提供和调整边框？现在我有一个我的锚标签的边框，因为宽度和高度是预定义的。我可以给这些锚标签的背景图像边框，即＆＃34;下一页＆＃34;和＆＃34;上一页＆＃34; ??

<!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>

Answer 1

您无法使用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

同样的想法。请注意，<a>的尺寸与图片的尺寸相匹配，并且边框应用于<a>，给人的印象是背景图片具有边框。显然，我使用的图像只是样本而且看起来不太好，但这种技术应该适合你。

如何为锚标记的背景图像添加边框？

1 个答案: