背景图像引导程序

5回答

蛊毒传说

它正在工作。在 bootstrap 版本 4.4.1 中尝试此操作.left {  background: url('images/bg-pattern-desktop.svg') no-repeat center center fixed;  -webkit-background-size: cover;   height: auto;}<!DOCTYPE html><html><head>  <title>Bootstrap Example</title>  <meta charset="utf-8">  <meta name="viewport" content="width=device-width, initial-scale=1">  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script></head><body>  <div class="container-fluid">       <div class="row">        <div class="col-7 left">        <h1> We're coming soon</h1>      Hello fellow shoppers! We're currently building our new fashion store.      Add your email below to stay up-to-date with announcements and our launch deals.      Email Address       </div>         <div class="col-5">      <img src="images/hero-desktop.jpg">    </div>    </div>   </div></body></html>

一只名叫tom的猫

如果你要在页面<style>中添加CSS，你的CSS应该在标签中.html如果您在单独的 css 文件中添加该 css，请确保图像路径正确或检查您的控制台，您一定会收到 404 文件未找到错误<body>  <div class="container-fluid">       <div class="row">        <div class="col-7 left">        <h1> We're coming soon</h1>      Hello fellow shoppers! We're currently building our new fashion store.      Add your email below to stay up-to-date with announcements and our launch deals.      Email Address       </div>         <div class="col-5">      <img src="images/hero-desktop.jpg">    </div>    </div>   </div></body><style>.left{    background-image: url('images/bg-pattern-desktop.svg');    background-position: center;    background-repeat: no-repeat;    background-size: cover;    height: auto;}</style>

陪伴而非守候

试试这个方法：所有其他工作都很棒，只需指定您的确切路径：{   background-image: url("C:\Desktop\images\bg-pattern-desktop.svg"); }只需获取映像所在的位置（即根磁盘的目录）并添加映像名称如：目录根 + 图片名称 c:\Users(用户名)\Desktop\ + picture.jpg。

动漫人物

请尝试此代码，到背景图像 Bootstrap<body class="left">  <div class="container-fluid">       <div class="row">        <div class="col-7">        <h1> We're coming soon</h1>      Hello fellow shoppers! We're currently building our new fashion store.      Add your email below to stay up-to-date with announcements and our launch deals.      Email Address       </div>         <div class="col-5">      <img src="images/hero-desktop.jpg">    </div>    </div>   </div></body>.left{    background-image: url("https://mdbootstrap.com/img/Photos/Horizontal/Nature/full page/img(20).jpg");    height:100%;    background-position: center;    background-repeat: no-repeat;    background-size: cover;    height: auto;}body{height:100%;}我希望这段代码对您有用。

UYOU

您可以使用 Bootstrap Grid，如下所示的示例在左列中显示背景图像，并在同一行的另一列中显示文本。.container {  margin: 20px;  padding: 20x;  display: flex;}.left {  background-image: url("https://image.shutterstock.com/image-photo/sunset-over-ocean-260nw-66975196.jpg");  background-position: center;  background-repeat: no-repeat;  background-size: cover;  height: 200px;  width: auto;}body {  width: 100%;}<!DOCTYPE html><html>  <head>    <title>Radha Yadav Web Developer</title>    <link rel="stylesheet" href="css/bootstrap-grid.min.css" />    <link rel="stylesheet" href="css/bootstrap.min.css" />    <link rel="stylesheet" href="BackgroundImage.css" />   </head>  <body>    <div class="container">      <div class="row">        <div class="col-md-6 left">          <h1>We're coming soon</h1>          Hello fellow shoppers! We're currently building our new fashion store.          Add your email below to stay up-to-date with announcements and our          launch deals. Email Address        </div>                <div class="col-md-6 right">            <h1>We're coming soon</h1>            Hello fellow shoppers! We're currently building our new fashion store.            Add your email below to stay up-to-date with announcements and our            launch deals. Email Address      </div>    </div>  </body></html>