Html 在背景图像周围放置按钮_Html_Css

Html 在背景图像周围放置按钮

html css

Html 在背景图像周围放置按钮,html,css,Html,Css,我想在背景图像周围放置多个链接按钮。以下是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：

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

由于按钮是按像素定位的，因此需要将

div#background

设置为固定大小，并将背景设置为

div#background

，而不是主体

同时拆下背景附件。此版本有效：

您有实际问题吗？什么对你不起作用？这几乎毫无意义，但我认为你正在寻找一个职位：固定；不是绝对的。我加了一把小提琴。只是需要一些定位。

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;
}