Question

我有一个背景图片和一个覆盖它的黑色阴影框（内联）覆盖它以使图像变暗，但是在移动设备上，页脚div超出了body标签。虽然背景仍然呈现并延伸到页面，但阴影框并不会一直延伸。

非常感谢任何帮助

HTML：

<div class="footer">
        <div class="container-fluid external-sites">
            <div class="flex-parent">
                <div class="flex-child child-1">
                    <a href="https://www.linkedin.com/in/andrew-waller-
  b66180146" target="_blank">
                        <div class="box">
                            <i class="fa fa-linkedin fa-5x"></i>
                        </div>
                    </a>
                </div>
                <div class="flex-child child-2">
                    <a href="https://github.com/Adrw4" target="_blank">
                        <div class="box">
                            <i class="fa fa-github-square fa-5x"></i>
                        </div>
                    </a>
                </div>
                <div class="flex-child child-3">
                    <a href="https://www.instagram.com/adrw4/?hl=en" 
 target="_blank">
                        <div class="box">
                            <i class="fa fa-instagram fa-5x"></i>
                        </div>
                    </a>
                </div>
                <div class="flex-child child-4">
                    <a href="#">
                        <div class="box">
                            <i aria-hidden="true" class="fa fa-html5 fa-5x 
   fa-center"></i>
                        </div>
                    </a>
                </div>
            </div>
        </div>
    </div>

的CSS：

   body {
    padding: 0;
    margin: 0;
    height: 100vh;
    width:100;
    }

    body,
    html {
    background: fixed;
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    min-height: 100%;
    width: 100%;
    background-image: url("../img/circuit-board.jpg");
    margin: 0px;
    padding: 0px;
    content: '';
    box-shadow: inset 0 0 0 10000px rgba(0,0,0,.7);
    }


    .text-box {
    text-align: center;
    color: white;
    font-style: oblique;
    }

   .box {
    text-align: center;
    background-color: black;
    margin: auto;
   }

   .external-sites {
    height: 25%;
    overflow: auto;
    }

   .flex-parent {
    list-style: none;
    -ms-box-orient: horizontal;
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -moz-flex;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
    justify-content: space-between;
    }

    .flex-child {
    text-align: center;
    width: 100vw;
    padding: 2px;
   }
.child-1 {
    order: 1;
}

.child-2 {
    order: 2;
}

.child-3 {
    order: 3;
}

.child-4 {
    order: 4;   
}

/*==============================================================================external sites==*/

@media only screen and (min-width: 830px) {
    body {
        overflow: hidden;
    }

    .flex-child {
        width: 400px;
    }
}

Answer 1

根据您需要的浏览器支持（无Edge＆amp; IE），您可以将背景颜色设置为深灰色，并使用background-blend-mode而不是使用巨型box-shadow。

body {
  background-color: #444;
  background-image: url(..img/yourImage.jpg);
  background-blend-mode: multiply;
}

请勿使用黑色作为background-color，否则您将无法看到自己的图片。通过改变颜色来控制它的暗度。

阴影框没有填充页面

1 个答案: