Bootstrap 节中背景图像未显示

t0ybt7op  于 2022-12-08  发布在  Bootstrap
关注(0)|答案(1)|浏览(205)

我试图把一个图像在背景中,但它不出现。我使用bootstrap 5和纯代码在css和html,我看了几个主题,试图解决这个问题,但我不知道我需要做什么
HTML语言

<section class="caseservices" style="padding: 4%;">
        <div class="container text-center" href="scrollspyHeading1">
            <h1>MES SERVICES</h1>
            <h3>Des prestations adaptées à vos besoins</h3>
        </div>
        <div class="container text-center" href="scrollspyHeading2">
            <div class="row">
                <div class="col">
                    <div class="row align-items-center">
                        <div class="col-10">
                            <h5 class="text-end">Gestion de projets web</h5>
                            <p class="text-end">Site vitrine, corporate, évènementiel, e-commerce, intranet, application
                                mobile.
                            </p>
                        </div>
                        <div class="col-2">
                            <i class="fa-solid fa-laptop-code fa-2xl"></i>
                        </div>

                        <div class="col-10">
                            <h5 class="text-end">Intégration Web</h5>
                            <p class="text-end">Des intégrations (X)HTML / CSS respectueuses des standards du Web.</p>
                        </div>
                        <div class="col-2">
                            <i class="fa-solid fa-code fa-2xl"></i>
                        </div>

                        <div class="col-10">
                            <h5 class="text-end">Développements spécifiques</h5>
                            <p class="text-end">Des outils adaptés à votre coeur de métier,
                                applications & solutions personnalisées.</p>
                        </div>
                        <div class="col-2">
                            <i class="fa-solid fa-wrench fa-2xl"></i>
                        </div>

                        <div class="col-10">
                            <h5 class="text-end">Référencement naturel</h5>
                            <p class="text-end">Affichage sémantique des informations,
                                des pages propres pour un référencement optimal.</p>
                        </div>
                        <div class="col-2">

                            <i class="material-icons"><img src="images/5902216.png" alt="" style="width: 100%;"></i>
                        </div>
                    </div>
                </div>
                <div class="col">
                    <img src="images/index.jpeg" class="d-block w-100" alt="...">
                </div>
                <div class="col">
                    <div class="row align-items-center">
                        <div class="col-2">

                            <i class="material-icons"><img
                                    src="images/kisspng-icon-design-web-development-responsive-web-design-black-brush-5afd4d493dd9d2.7237427015265498332534.png"
                                    alt="" style="width: 100%;"></i>
                        </div>
                        <div class="col-10">
                            <h5 class="text-start">Conception graphique & Webdesign</h5>
                            <p class="text-start">Logos, templates Web, plaquettes publicitaires,
                                cartes de visite, newsletters...</p>
                        </div>

                        <div class="col-2">

                            <i class="material-icons"><img src="images/3938579.png" alt="" style="width: 100%;"></i>

                        </div>
                        <div class="col-10">
                            <h5 class="text-start">Dynamisme des pages</h5>
                            <p class="text-start">Des animations de contenu non intrusives
                                pour embellir votre projet.</p>
                        </div>

                        <div class="col-2">

                            <i class="material-icons"><img src="images/2739572-200.png" alt="" style="width: 100%;"></i>
                        </div>
                        <div class="col-10">
                            <h5 class="text-start">Interface d'administration</h5>
                            <p class="text-start">Outils spécifiques au bon fonctionnement
                                de votre entreprise.</p>
                        </div>

                        <div class="col-2">

                            <i class="material-icons"><img src="images/1027666.png" alt="" style="width: 100%;"></i>
                        </div>
                        <div class="col-10">
                            <h5 class="text-start">Responsive design</h5>
                            <p class="text-start">Compatible tous supports, tablette & application mobile.</p>
                        </div>

                    </div>
                </div>
            </div>

            <p>Compatible Mobile, Tablettes & P.C</p>
            <h3>Développement Web Responsive</h3>
        </div>
    </section>

CSS

.caseservices {
  background-image: url("istockphoto-919065930-612x612.jpg");
}

在这一节中,我试图把一个图像放在背景中,这样它就不会看起来太空,但它不会显示。我试图在一个主题中这样做,但它没有工作,哪里是'错误

qnakjoqk

qnakjoqk1#

我刚刚试了你的代码,用我的代码修改了你的图片,检查了一下附加的内容。它运行的很好。也许你可以试着检查一下你的css文件的链接是否正确,或者图片的名称是否正确。

相关问题