背景图像引导程序
我正在尝试解决 Frontend Mentor 上的挑战。我制作了一个有 2 列的容器，我想在左列上放置一个 SVG 背景图像。我尝试在 HTML 文件中插入 SVG，并且它有效，但是当我使用 CSS 时没有任何反应。这是代码：
'''
<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;
}
'''
谁能帮我。
请随意评论我的第一个问题。
30秒到达战场浏览 59回答 5
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> <!-- Right side --> <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> <!-- 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> -
陪伴而非守候
试试这个方法：所有其他工作都很棒，只需指定您的确切路径：{ 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> <!-- 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%;}我希望这段代码对您有用。 -
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> <!-- 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>
随时随地看视频慕课网APP
相关分类
Html5