未知宽高图片的水平垂直居中

最新推荐文章于 2019-08-21 13:46:00 发布

大月半

最新推荐文章于 2019-08-21 13:46:00 发布

阅读量515

点赞数

分类专栏： html 文章标签： css html

本文链接：https://blog.csdn.net/qq_22583409/article/details/78754381

版权

html 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

背景图片居中

原理：
使用一个透明的gif图片做覆盖层，高宽拉伸至所需要的大小，然后给这个gif图片一个background-position:center center的属性。而background-image建议写在页面上，因为实际项目中，这肯定是个动态的URL地址，css文件似乎不支持动态URL地址。

示例代码：

<html>
    <head>
        <style>
#box{
    width:600px;
    height:600px;
    background: black;
    border:1px solid #d3d3d3;
}
#box img {
    background-repeat: no-repeat;
    background-position: center;
    background-attachment:fixed;
    width:100%;
    height:100%;
    border: 1px solid #d3d3d3;
}

        </style>
    </head>

    <body>
        <div id="box">
            <img src="img/pixel.png" alt="" style="background-image:url(img/panda.jpg);" />
        </div>
        <div id="box">
            <img src="img/pixel.jif" alt="" style="background-image:url(img/Jackma.jpg);" />
        </div>
    </body>
</html>

pixel.gif和pixel.png都是300px*300px的透明图片。经过测试png和gif两种类型其实都可以，究竟哪种类型我觉得看需求，用png的话可以更好的支持半透明的效果。（个人观点）
这里写图片描述
（注意这里一定得是透明的图片，因为它是覆盖在你要显示的图片上）

设置box的宽高都是600px，为了更好的显示加了一个背景颜色和边框。box底下的img给设了一个宽高100%，目的是把透明图片铺满box。

利用background-position中有个center属性。可以完美实现居中。别忘了background-repeat: no-repeat;

background-position 属性设置背景图像的起始位置。

提示：需要把 background-attachment 属性设置为 “fixed”，才能保证该属性在 Firefox 和 Opera 中正常工作。

最终效果：
这里写图片描述

这样直接操作html中的url地址就可以不用考虑该图片的宽高实现水平垂直居中。

思考：

/* 省略一部分 */
#box div {
    background-repeat: no-repeat;
    background-position: center ;
    width:100%;
    height:100%;
    border: 1px solid #d3d3d3;
}

<div style="background-image:url(img/panda.jpg);" />

其实不用img搞一个透明图片覆盖也可以这样实现垂直水平居中的，用透明图层覆盖的话会便于维护一些。

大月半

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
未知宽高图片的水平垂直居中

背景图片居中原理：使用一个透明的gif图片做覆盖层，高宽拉伸至所需要的大小，然后给这个gif图片一个background-position:center center的属性。而background-image建议写在页面上，因为实际项目中，这肯定是个动态的URL地址，css文件似乎不支持动态URL地址。示例代码：<html> <head> <style>#box{
复制链接

扫一扫

专栏目录