背景图片居中和超链接绝对定位并使用图片背景的问题

最新推荐文章于 2022-10-07 19:03:02 发布

alanzyy

最新推荐文章于 2022-10-07 19:03:02 发布

阅读量6.8k

点赞数 1

分类专栏： HTML5+CSS3

本文链接：https://blog.csdn.net/alanzyy/article/details/8805553

版权

HTML5+CSS3 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

前提说明:

home.png是一张大小为1089*948大小的背景图片

subscriber-login.png是一张大小为203*32大小的登陆按钮图片，而且该图片截取于背景图片中，位置为(822,171)

需求：

现在想要实现一个页面，居中显示背景图片，然后点击subscriber-login.png所表示的按钮或者超链接进入登陆页面

最终代码：

    <body>
        <div  align="center">
            <div  align="left" style=" width:1089px; height: 948px; background-image: url(images/home.png);">
                <a href="login.jsp" style=" position: relative; left: 822px; top: 171px; width: 203px; height: 32px;">
                    <img src="images/subscriber_login.png" style="border:none;"/>
                </a>
            </div>
        </div>
    </body>

实现过程：

1 背景居中设置

以下代码可以将背景图片设置为居中，要点是用两层div：首先将内层div大小固定为背景图片的大小，并将背景图片设置为该div的背景；然后在用外层div包含内层div，且设置对齐为居中即可

    <body>
        <div  align="center">
            <div  align="left" style=" width:1089px; height: 948px; background-image: url(images/home.png);">
            </div>
        </div>
    </body>

2 设置登陆按钮(IE有效)

注：这里发生了IE和Firefox不兼容的问题

以下代码在内层div中添加超链接，设置其相对定位position: relative; left: 822px; top: 171px; 同时设置该超链接的大小width: 203px; height: 32px;

但是该代码只能在IE中起效，在Firefox中则根本找不到超链接的位置，估计是大小没有起效为0了

    <body>
        <div  align="center">
            <div  align="left" style=" width:1089px; height: 948px; background-image: url(images/home.png);">
                <a href="login.jsp" style=" position: relative; left: 822px; top: 171px; width: 203px; height: 32px;"></a>
            </div>
        </div>
    </body>

3 设置登陆按钮(IE/Firefox有效)

怀疑是超链接<a>的大小设置失效，想为超链接添加背景图片，以确定超链接的大小，Firefox依然无效

<a href="login.jsp" style=" position: relative; left: 822px; top: 171px; width: 203px; height: 32px; background-image: url(images/subscriber-login.png.png);"></a>

Firefox中多次测试无效后，在超链接中添加文字查看效果，发现文字可以显示，但是背景图片并不显示，更换背景图片的设置方式background: url(images/subscriber-login.png.png) no-repeat; 依然不起效，怀疑是Firefox中超链接不支持设置背景图片

<a href="login.jsp" style=" position: relative; left: 822px; top: 171px; width: 203px; height: 32px; background-image: url(images/subscriber-login.png);">Test</a>

最后想到在超链接中添加图片

    <body>
        <div  align="center">
            <div  align="left" style=" width:1089px; height: 948px; background-image: url(images/home.png);">
                <a href="login.jsp" style=" position: relative; left: 822px; top: 171px; width: 203px; height: 32px;">
                    <img src="images/subscriber_login.png"/>
                </a>
            </div>
        </div>
    </body>

此时超链接终于在想要的位置显示出来，IE和Firefox都其效果，但是IE中却发下图片四周多了一个蓝色边框，在点击之后边框会变成紫色，而Firefox则没有这个问题

最后，取消IE中的边框

<img src="images/subscriber_login.png" style="border:none;"/>

总结：

(a) Firefox中不支持直接设置超链接的大小，也不支持超链接设置背景图片，而IE可以

(b) 超链接<a>中包含图片<img>时，IE会出现边框，而Firefox不会

alanzyy

关注

1
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
背景图片居中和超链接绝对定位并使用图片背景的问题

前提说明:home.png是一张大小为1089*948大小的背景图片subscriber-login.png是一张大小为203*32大小的登陆按钮图片，而且该图片截取于背景图片中，位置为(822,171) 需求：现在想要实现一个页面，居中显示背景图片，然后点击subscriber-login.png所表示的按钮或者超链接进入登陆页面最终代码：
复制链接

扫一扫

专栏目录