问答博客资讯标签用户活动
logo极客观点logo项目管理logoHarmonyOS
开发者社区
javascript
前端
python
node.js
react
vue.js
php
laravel
go
人工智能
mysql
linux
ios
java
android
css
typescript
spring
程序员
logoONES 研发管理logo思否企业问答logo安谋科技 XPU

如何让div里的背景拉升并居中？

头像
已注销
    1749

    1. 外面一个div放一个背景图，里面放一个头部图片，头部图片是从背景图截下来来的。所以让它俩居中正好能拼在一起。

    2. 但是背景的宽度不够，我想把背景拉伸，但这样却不能够完美的拼在一起。

    原代码：

    <!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            body{margin:0;padding: 0;}
            .bodyBG{background: url(bodyBG.gif)no-repeat 50% 0;height: 546px;}
            .head{background: url(erjiHead.jpg)no-repeat 50% 0;height: 212px;}
        </style>
    </head>
    <body>
        <div class="bodyBG">
            <div class="head">
            </div>
        </div>
    </body>
</html>

    原效果：
    图片描述

    当我把两个的backgroung后面改成100% 0后，变成下面这个样子
    图片描述

    有什么好的方法可以解决这样的问题，实现这样的效果，只要拼起来，铺满游览器就好：
    图片描述

    背景 bodyBG.gif 1280*546
    图片描述

    头部图片 erjiHead.jpg 992*212
    图片描述

    htmlcss
    阅读 3.4k
    1 个回答
    得票最新
    头像
    请叫我禽兽
      1.5k1310
      background-position: top center;

      试试？

      <!DOCTYPE html>
      <html>

      <head>
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
        body{margin:0;padding: 0;}
        .bodyBG{
            width: 100%; 
            background: url(bodyBG.gif)no-repeat top center;height: 546px #000 /* 最好给它一个跟背景图相近的颜色，这样超出图片最大宽度也不会显得突兀 */; 
        }
        .head{
            width: /*定宽*/;
            height: 212px; 
            margin: 0 auto; 
            background: url(erjiHead.jpg)no-repeat top center;
        }
    </style>
</head>
<body>
    <div class="bodyBG">
        <div class="head">
        </div>
    </div>
</body>

      </html>

      撰写回答
      你尚未登录，登录后可以
      • 和开发者交流问题的细节
      • 关注并接收问题和回答的更新提醒
      • 参与内容的编辑和改进，让解决方法与时俱进
      推荐问题