我一直试图包括我在插画家中创建的背景。该文件已导出为PNG但当我尝试使用background-image在代码中链接它时，它将无法正常工作。我已经尝试将其链接到文件中，并将其上传到可以从中检索的网站。
我想让它进入的盒子是“底部项目 - 关于”
/*Main about flex container styling*/
.grid-items {
display: flex;
flex-flow: row wrap;
}
/*Styling of items inside main about flex container */
.grid-items > div {
width: 100px;
text-align: center;
line-height: 75px;
font-size: 30px;
}
/*The left, right & bottom box main styling*/
.grid-item {
flex: 1 calc(50% - 20px);
padding: 0 50px 40px;
box-sizing: border-box;
min-height: 650px;
position: relative;
overflow: hidden;
flex-direction: column;
justify-content: center;
display: flex;
text-align: center;
}
/*Bottom about box styling*/
.grid-item-wide {
flex: 1 100%;
min-height: 575px;
padding-bottom: 20px;
}
/*Left about box colour*/
.left-item-about {
background-color: #F2D0A4;
}
/*Right about box colour*/
.right-item-about {
background-color: #545E75;
color: #fff;
}
/*Bottom about box colour*/
.bottom-item-about {
background-image: url(https://imgur.com/DWpaLxD);
/* or can use 'url(img/services-background.png)*/
background-color: #3F826D;
color: #fff;
}<!DOCTYPE html>
<html>
<head>
<title>Hector's Portfolio</title>
<!-- CSS style sheet -->
<link rel="stylesheet" type="text/css" href="css/style.css">
<!-- Font link -->
<link href="https://fonts.googleapis.com/css?family=Cardo:400,700|Montserrat:400,500,800" rel="stylesheet">
<!-- Linking social icons -->
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous">
<!-- Scaling debending on device -->
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<!-- Body with class to style what is inside of it -->
<body class="layout-portfolio">
<div class="grid-item grid-item-wide bottom-item-about"> <!-- this container needs the background -->
<!-- Services text container -->
<div class="grid-item grid-item-service-wide">
<!-- Services Title -->
<h3 class="case-item-header">Services</h3>
</div>
<!-- Services icons/info section -->
<div id="about" class="content-wrapper gridItems-peak grid-items">
<!-- Two child elements inside flex container -->
<!-- Left side icons/info -->
<div class="grid-item-services left-item-services">
</div>
<!-- Right side icons/info -->
<div class="grid-item-services right-item-services">
</div>
</div>
</body>
</html>只需将https://imgur.com/DWpaLxD的背景图像路径更改为https://i.imgur.com/DWpaLxD.jpg类的bottom-item-about。
/*Styling of items inside main about flex container */
.grid-items > div {
width: 100px;
text-align: center;
line-height: 75px;
font-size: 30px;
}
/*The left, right & bottom box main styling*/
.grid-item {
flex: 1 calc(50% - 20px);
padding: 0 50px 40px;
box-sizing: border-box;
min-height: 650px;
position: relative;
overflow: hidden;
flex-direction: column;
justify-content: center;
display: flex;
text-align: center;
}
/*Bottom about box styling*/
.grid-item-wide {
flex: 1 100%;
min-height: 575px;
padding-bottom: 20px;
}
/*Left about box colour*/
.left-item-about {
background-color: #F2D0A4;
}
/*Right about box colour*/
.right-item-about {
background-color: #545E75;
color: #fff;
}
/*Bottom about box colour*/
.bottom-item-about {
background-image: url(https://i.imgur.com/DWpaLxD.jpg);
/* or can use 'url(img/services-background.png)*/
background-color: #3F826D;
color: #fff;
}<div class="grid-item grid-item-wide bottom-item-about">
<div class="grid-item grid-item-service-wide">
<h3 class="case-item-header">Services</h3>
</div>
<div id="about" class="content-wrapper gridItems-peak grid-items">
<div class="grid-item-services left-item-services">
</div>
<div class="grid-item-services right-item-services">
</div>
</div>
</div>.bottom-item-about {
background:url(../img/services-background.png) left top #3F826D;
color: #fff;
}
尝试使用../这条路径它不取出可能是因为你把图像放在/img而你的css在/css
/*Bottom about box colour*/
.bottom-item-about {
background-image: url(https://imgur.com/DWpaLxD);
/* or can use 'url(img/services-background.png)*/
background-color: #3F826D;
color: #fff;
}
替换这一行：
`background-image: url(https://imgur.com/DWpaLxD);`
有了这个：
`background-image: url(https://i.imgur.com/DWpaLxD.jpg);`
这是您上传的图片真实网址。以图像扩展名结尾（.jpg，.png，.gif，...）
或您的本地文件网址，它应该工作