时间戳

首页 > 解决方案 > 单页应用程序中的图像问题

html - 单页应用程序中的图像问题

问题描述

我正在创建一个没有路由的单页应用程序。
我正在使用引导程序，并且我有一个背景图像，但由于内容而失真。

这是我的前端：

@import url('https://fonts.googleapis.com/css?family=Lora:400,700&display=swap');
html,
body {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-size: 17px;
    font-family: 'Lora', serif;
    background-image: url('https://firebasestorage.googleapis.com/v0/b/muspikess.appspot.com/o/website%2Folena-sergienko-3kvB1VldPBI-unsplash.jpg?alt=media&token=94b21b44-82fc-47a3-8e44-85a160e8c268');
    background-size: cover;
    background-repeat: repeat;
}

a {
    text-decoration: none;
    color: black;
}

.dark-color {
    color: #333;
    border-color: #333;
}

.dark-color:hover {
    color: white;
    background-color: #333;
    border-color: #333;
}

.fa-twitter:hover {
    color: #55acee;
}
<body>
    <header class="mt-4">
        <div class="container">
            <nav class="navbar">
                <a class="navbar-brand " href="#">
                    <img src="https://firebasestorage.googleapis.com/v0/b/muspikess.appspot.com/o/website%2Fbrand.png?alt=media&token=22d368f7-26eb-4d2a-804d-86908fe5edee" width="50" height="50" class="d-inline-block align-top" alt="">
                </a>
                <a class="mr-5" href="https://twitter.com/muspikesss">
                    <i class="fab fa-twitter fa-2x"></i>
                </a>
            </nav>
        </div>
    </header>

    <main>
        <div class="container mt-5">
            <div class="row ml-5">
                <div class="col-md-4 ">
                    <h2>Who we are?</h2>
                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Enim quos expedita dicta culpa velit alias, esse sit omnis in delectus quod, quas suscipit cumque tempora illum ipsam, ex quae labore.</p>
                </div>
            </div>
            <div class="row ml-5">
                <div class="col-md-4 offset-md-4">
                    <h2>How to participate?</h2>
                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Enim quos expedita dicta culpa velit alias, esse sit omnis in delectus quod, quas suscipit cumque tempora illum ipsam, ex quae labore.</p>
                </div>
            </div>
        </div>

        <div>
        </div>
    </main>


</body>

我得到了这个：

在此处输入图像描述

如您所见，时钟变形了。

而且我的形象没有问题

在此处输入图像描述

我究竟做错了什么？

标签： htmlcssbootstrap-4

解决方案

时钟变形，因为您将背景图像应用于html和body元素。您可以通过仅将背景图像应用于body元素来修复它，例如

html,
body {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-size: 17px;
    font-family: 'Lora', serif;
}

body {
  background-image: url('https://firebasestorage.googleapis.com/v0/b/muspikess.appspot.com/o/website%2Folena-sergienko-3kvB1VldPBI-unsplash.jpg?alt=media&token=94b21b44-82fc-47a3-8e44-85a160e8c268');
    background-size: cover;
    background-repeat: repeat;
}

推荐阅读