第七色在线视频,2021少妇久久久久久久久久,亚洲欧洲精品成人久久av18,亚洲国产精品特色大片观看完整版,孙宇晨将参加特朗普的晚宴

為了賬號安全，請及時綁定郵箱和手機立即綁定
已解決430363個問題，去搜搜看，總會有你想問的

背景圖像引導(dǎo)程序

背景圖像引導(dǎo)程序

30秒到達戰(zhàn)場 2024-01-11 17:09:30
我正在嘗試解決 Frontend Mentor 上的挑戰(zhàn)。我制作了一個有 2 列的容器，我想在左列上放置一個 SVG 背景圖像。我嘗試在 HTML 文件中插入 SVG，并且它有效，但是當(dāng)我使用 CSS 時沒有任何反應(yīng)。這是代碼：'''<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>? ? ?<!-- Right side -->? ? <div class="col-5">? ? ? <img src="images/hero-desktop.jpg">? ? </div>? ? </div>? ?</div></body>.left{? ? background-image: url('images/bg-pattern-desktop.svg');? ? background-position: center;? ? background-repeat: no-repeat;? ? background-size: cover;? ? height: auto;}'''誰能幫我。請隨意評論我的第一個問題。
查看完整描述

5 回答

?
蠱毒傳說

TA貢獻1895條經(jīng)驗 獲得超3個贊

它正在工作。在 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>


     <!-- Right side -->

    <div class="col-5">

      <img src="images/hero-desktop.jpg">

    </div>

    </div>

   </div>

</body>

</html>


查看完整回答
反對 回復(fù) 2024-01-11
?
一只名叫tom的貓

TA貢獻1906條經(jīng)驗 獲得超3個贊

如果你要在頁面<style>中添加CSS，你的CSS應(yīng)該在標簽中.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>


     <!-- Right side -->

    <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>


查看完整回答
反對 回復(fù) 2024-01-11
?
陪伴而非守候

TA貢獻1757條經(jīng)驗 獲得超8個贊

試試這個方法：

所有其他工作都很棒，只需指定您的確切路徑：

{
  background-image: url("C:\Desktop\images\bg-pattern-desktop.svg");
}

只需獲取映像所在的位置（即根磁盤的目錄）并添加映像名稱

如：目錄根 + 圖片名稱 c:\Users(用戶名)\Desktop\ + picture.jpg。


查看完整回答
反對 回復(fù) 2024-01-11
?
動漫人物

TA貢獻1815條經(jīng)驗 獲得超10個贊

請嘗試此代碼，到背景圖像 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>


     <!-- Right side -->

    <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%;}

我希望這段代碼對您有用。


查看完整回答
反對 回復(fù) 2024-01-11
?
UYOU

TA貢獻1878條經(jīng)驗 獲得超4個贊

您可以使用 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>


        <!-- Right side -->

        <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>


查看完整回答
反對 回復(fù) 2024-01-11
  • 5 回答
  • 0 關(guān)注
  • 209 瀏覽

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯(lián)系客服咨詢優(yōu)惠詳情

 幫助反饋 APP下載

慕課網(wǎng)APP
您的移動學(xué)習(xí)伙伴

 公眾號

掃描二維碼
關(guān)注慕課網(wǎng)微信公眾號