Html 如何为锚定标记指定边框'；背景图像是什么？_Html_Css

Html 如何为锚定标记指定边框'；背景图像是什么？

html css

Html 如何为锚定标记指定边框'；背景图像是什么？,html,css,Html,Css,如何在锚定标记的背景图像周围提供和调整边框？现在，随着宽度和高度的预定义，我有了锚定标记的边框。我可以在这些锚定标签的背景图像（即“下一个”和“上一个”）周围加上边框吗 jQuery UI对话框：隐藏关闭按钮/标题栏迈斯里德先生 { // } .shadow_分区 { // } mySlider先生 { 宽度：800px；高度：480px；显示：无； } .Parent_滑块>a { 文字装饰：无；字体大小：粗体；宽度：32px；高度：32px；位置：绝对位置；最高：45%；

如何在锚定标记的背景图像周围提供和调整边框？现在，随着宽度和高度的预定义，我有了锚定标记的边框。我可以在这些锚定标签的背景图像（即“下一个”和“上一个”）周围加上边框吗


jQuery UI对话框：隐藏关闭按钮/标题栏
迈斯里德先生
{
//
}
.shadow_分区
{
//
}
mySlider先生
{
宽度：800px；
高度：480px；
显示：无；
}
.Parent_滑块>a
{
文字装饰：无；
字体大小：粗体；
宽度：32px；
高度：32px；
位置：绝对位置；
最高：45%；
文本缩进：-9999px；
}
.下节课
{
右：282px；
背景图片：url（Images/rightarrow.jpg）；
边框：1px纯白；
}
.Prev_类
{
左：282px；
背景图片：url（Images/leftarrow.jpg）；
}
圆形按钮
{
位置：相对位置；
左：35%；
顶部：5px；
文字装饰：无；
列表样式类型：无；
文本缩进：-9999px
}
圆形按钮
{
浮动：左；
背景色：白色；
保证金：1px 5px；
填充：0px 7px；
边界半径：50%；
边框宽度：1px；
边框：1px实心#3610a5；
光标：指针；
盒影：1px-1px 3px 1px#3610a5；
过渡：所有1都易于输入输出；
-moz转换：所有1都易于输入输出；
-webkit转换：所有1都易于输入输出；
}
圆形按钮：悬停
{
变换：旋转（-360度）；
-webkit变换：旋转（-360度）；
-moz变换：旋转（-360度）；
}
$（文档）.ready（函数（）{
//
});

您不能使用css将边框添加到背景图像中，但可能还有其他选择。没有更多细节，很难说最佳路线，但假设您知道图像的尺寸，您可以设置


更新基于您对代码的最新问题，我又做了一次修改：

同样的想法。请注意，
的尺寸与图像的尺寸匹配，边框应用于
，给人的印象是背景图像有边框。显然，我使用的图像只是样本，看起来不太好，但这种技术应该适合您。
您不能使用CSS来完成这项工作；因为背景图像不能被定位。您必须在图像编辑程序中添加边框，除非元素仅使用背景图像，没有文本内容，并且/或者大小可以预测。但是根据你分享的信息，我们不能说，猜测对任何人都没有好处。请提供一些进一步的细节。示例代码是必要的，您还可以创建一个JSFIDLE来帮助人们回答。这取决于具体情况，如果您知道背景图像的确切位置和大小，我们应该有一些解决方案。嗯，对不起，我指的是相关的示例代码，而不是整个代码转储。
<!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>  

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*/
}