我正在尝试解决 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;}'''谁能帮我。请随意评论我的第一个问题。
5 回答
蛊毒传说
TA贡献1895条经验 获得超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>
一只名叫tom的猫
TA贡献1906条经验 获得超2个赞
如果你要在页面<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>
陪伴而非守候
TA贡献1757条经验 获得超8个赞
试试这个方法：
所有其他工作都很棒，只需指定您的确切路径：
{
background-image: url("C:\Desktop\images\bg-pattern-desktop.svg");
}只需获取映像所在的位置（即根磁盘的目录）并添加映像名称
如：目录根 + 图片名称 c:\Users(用户名)\Desktop\ + picture.jpg。
动漫人物
TA贡献1815条经验 获得超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%;}
我希望这段代码对您有用。
UYOU
TA贡献1878条经验 获得超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>
- 5 回答
- 0 关注
- 52 浏览
添加回答
举报
0/150
提交
取消