请老师帮我看看,为什么我的显示跟效果图不同,横向没有滚动条

来源:4-3 编程练习

没鞋的浪子

2019-06-09 15:43:00

<!DOCTYPE html>

<html>

<head>

    <meta charset="UTF-8">

<title></title>

<style>

    *{margin:0;

    padding:0;}

    .mooc{

            background: url(http://climg.mukewang.com/59c9f7ce0001839219034033.png);

            width: 100%;

            height: 4033px;

    }

    .web{

        background: url(http://climg.mukewang.com/5a3383c70001f1b702240364.png);

        width:200px;

        height:400px;

        position: fixed;

        top: 50%;

            left: 0px;

             margin-top: -200px;

    }

    .java{

            background: url(http://climg.mukewang.com/5a3383d00001a3dd02240364.png);

            width: 200px;

            height: 400px;

            position: fixed;

            top: 50%;

            right:0px;

            margin-top: -200px;

</style>

</head>

<body>

<div class="mooc">

        <div class="web"></div>

        <div class="java"></div>

    </div>

</body>

</html>


写回答

1回答

好帮手慕夭夭

2019-06-09

你好同学,页面不需要设置横向滚动条哦,代码中有一个小问题如下:

盒子高度大于图片高度,所以背景图铺不满会重复平铺

http://img.mukewang.com/climg/5cfcd05b00019e3b03280567.jpg

背景图可以设置如下,cover把背景图像扩展至足够大,以使背景图像完全覆盖背景区域。

http://img.mukewang.com/climg/5cfcd0a800011ca909850164.jpg

祝学习愉快,望采纳。

0

0 学习 · 40143 问题

查看课程