无法将 png 图像放在容器的边框边缘答案

【问题标题】：Unable to put a png image on the border edge of a container无法将 png 图像放在容器的边框边缘
【发布时间】：2021-06-02 12:45:43
【问题描述】：

不知道为什么我无法将 .png 图像与容器的边框对接。我已经尝试了一切。填充、边距、位置和图像不会向下移动。我什至尝试将图像移出容器，但这会增加太多额外的工作和脚本。我希望有人可以在这里帮助我。我无法加载代码。这是一个包含 HTML 和 CSS 的文档。图像是 div 中的一个类。任何帮助都会很棒。我也无法加载图片。

file:///Users/suzannehunter/Desktop/web%20development/CSS-My%20Site/index.html

【问题讨论】：

我们可能会提供帮助的唯一方法是查看您的相关“minimal reproducible example”代码，您可以与我们分享吗？
嗯，您确定使用 css 会对图像产生影响吗？那你确定里面的div没有填充吗？？如果能贴出代码就更好了。
向我们提供本地计算机上文件的路径对我们没有任何好处。请使用 Stack Snippets（图标在编辑器工具栏中看起来像 <>）将您的代码的可运行 sn-p 添加到您的问题中。您需要将图像作为数据 URI 或作为可访问 Internet 的位置的完全限定 URL 提供。
感谢您的所有回复。我能够弄清楚如何添加代码...我希望...这是我的第一篇文章..

标签： html css fonts

【解决方案1】：

给你的父 div position relative 和孩子 position absolute。然后你在 with side 上指定图像将与边框重叠。如果左侧使用left: -5px(the negative value of the border thickness)，或者right: 用于右侧。

<div style="background:red;border:5px solid black;position: relative;height: 200px;width: 100px;">
        <div style="background: blue;height: 50px;width: 50px;position: absolute;right: -5px;"></div>
</div>

【讨论】：

【解决方案2】：

非常感谢您的回复，我尝试按照您所说的更改职位。 Parent 已经是（顶部容器）已经是相对的了。当我改变孩子（拳击手的形象）绝对时，它保持固定并且不会与父母中的其他孩子一起浮动。我要添加浮动吗？安置是另一回事。我将再次尝试包含代码。上次不让我添加代码和图像。您如何添加代码或他们不允许添加代码？[

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>AnimalKrate</title>
    <link rel="stylesheet"  href="css/styles.css">
    <link rel="icon" href="favicon.ico">
    <link rel="preconnect" href="https://fonts.gstatic.com">
    <link href="https://fonts.googleapis.com/css2?family=Fredoka+One&family=Open+Sans+Condensed:wght@300&family=Raleway&display=swap" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css2?family=EB+Garamond&display=swap" rel="stylesheet">
  </head>
  <body>
    <div class="top-container">
      <img class="top-bone" src="images/bone.png" alt="bone-img">
      <h1>AnimalKrate</h1>
        <h2><span class="pet">PET</span> source for everything</h2>
        <img class="bottom-bone" src="images/bone.png" alt="bone">
        <img  class="boxer" src="images/boxer.png" alt="boxer-img">
  </div>
 <div class="middle-container">
      <div class="profile">
        <img src="images/pawprint.png" alt="pawprint" style = "padding-top:25px">
        <h2 style="margin-bottom:5px;">Woof</h2>
        <p class="intro">We are your source for everything a pet lover loves. Buying and selling only the most sought after specialty items.</p>
      </div>

      <hr>
      <div class="skills">
        <h2>Pet Toys</h2>
        <div class="skill-row" style="margin-top: 30px;">
          <img class="dog-ball" src="images/dog-ball.png" alt="dog-ball">

          <h3>Lorem & Ipsum</h3>
          <p>Lorem ipsum dolor sit amet, quis in duis, iaculis id felis. Consectetuer vestibulum, nunc urna lectus, erat ligula. Hendrerit nam, lectus ante, ut lorem eros.</p>
        </div>

        <div class="skill-row" style= "margin-bottom: 50px;">
          <img class="dog-toy" src="images/dog-toy.png" alt="dog-toy">
          <h3>Lorem Ipsum Dolor</h3>
          <p>Lorem ipsum dolor sit amet, mauris sed consectetuer. Etiam et eu, bibendum interdum, lacus quis mauris. Curabitur wisi, quisque vel eu, rutrum nam.</p>
        </div>
  </div>
      <hr>


     </div>

    <div class="bottom-container">
      <div class="contact-me">
        <h2 style = "padding-top: 25px;">Get In Touch</h2>
        <h3>Lorem ipsum dolor sit amet, non elit.</h3>
        <p class="contact-message">Lorem ipsum dolor sit amet, in quis, aenean amet. Phasellus sodales, tellus donec dui, ornare erat.</p>
        <a class="myButton">Contact Me</a>
        <a href="mailto:2Turkeywithlove.com"></a>
      </div>
      <a class="footer-link" href="https://www.chewy.com/">Chewy</a>
      <a class="footer-link" href="https://www.krisers.com/">Krisers</a>
      <a class="footer-link" href="https://www.petsmart.com/">Petsmart</a>
      <p class="copyright">© 2018 Hunter.</p>

    </div>
  </div>

  </body>
</html>

body{
  color: #405143;
  margin: 0;
  text-align: center;
  font-family: Garamond, serif;
  font-size: 18px;

}

h1{
  color: #5b5b5b;
  font-size: 60px;
  margin: 50px auto 0 auto;
  font-family:'Fredoka One', cursive;

}

h2 {
  color: #5b5b5b;
  font-family: 'EB Garamond', serif;
  font-size: 2rem;
  font-weight: normal;
  margin-top: 25px;



}

h3 {
   color:#794646;
   font-family: 'open sans condensed';
   font-weight:bolder;



}

a{

  color: #794646;
  font-family: 'EB Garamond', serif;
  margin: 5px 5px;
  text-decoration: none;
}

a:hover{
     color: #5b5b5b;

}
p {
  line-height: 1.5;
}

.top-container {
  background-color: #d8c292;
  position:relative;
  padding-top: 20px;


}

.middle-container{


}

.bottom-container{
  background-color: #c19065;
  position: relative;
  padding-bottom: 25px;

}

.pet {

  text-decoration: underline;
}

.bottom-bone{

  position: absolute;
  left: 150px;
  bottom: 300px;

}

.top-bone{
   position: absolute;
   right: 200px;
   top: 150px;


}

.contact-message {
  width: 40%;
  margin: 20px auto 30px;
}

.copyright{

     font-size: 1rem;
     padding:20px 0px;

}
.skill-row{
      width: 50%;
      margin: 100px auto 100px auto;
      text-align: left;

}

.intro {
   width:30%;
   margin: auto;

}

.pawprint {
   width: 25%;


}

.dog-ball {
  width: 35%;
  float: left;
  margin-right: 30px;

}

.dog-toy {
  width: 35%;
  float: right;
  margin-left: 30px;


}

hr{
  margin-top:40px;
  margin-bottom: 40px;
  border-style: none;
  border-top-style: dotted;
  border-color: grey;
  border-width:5px;
  width: 5%;

}

.style {

   margin-top:30px;
}

.boxer{

  
}

.myButton {
    margin-bottom: 20px;
    box-shadow: 0px 1px 0px 0px;
    background-color:#eae0c2;
    border-radius:6px;
    border:1px solid #333029;
    display:inline-block;
    cursor:pointer;
    color:#505739;
    font-family: 'Arial';
    font-size:14px;
    font-weight:bold;
    padding:9px 10px;
    text-decoration:none;
    text-shadow:0px 1px 0px #ffffff;
  }
  .myButton:hover {
    background-color:#ccc2a6;
  }
  .myButton:active {
    position:relative;
    top:1px;

  }

body{
  color: #405143;
  margin: 0;
  text-align: center;
  font-family: Garamond, serif;
  font-size: 18px;

}

h1{
  color: #5b5b5b;
  font-size: 60px;
  margin: 50px auto 0 auto;
  font-family:'Fredoka One', cursive;

}

h2 {
  color: #5b5b5b;
  font-family: 'EB Garamond', serif;
  font-size: 2rem;
  font-weight: normal;
  margin-top: 25px;



}

h3 {
   color:#794646;
   font-family: 'open sans condensed';
   font-weight:bolder;



}

a{

  color: #794646;
  font-family: 'EB Garamond', serif;
  margin: 5px 5px;
  text-decoration: none;
}

a:hover{
     color: #5b5b5b;

}
p {
  line-height: 1.5;
}

.top-container {
  background-color: #d8c292;
  position:relative;
  padding-top: 20px;


}

.middle-container{


}

.bottom-container{
  background-color: #c19065;
  position: relative;
  padding-bottom: 25px;

}

.pet {

  text-decoration: underline;
}

.bottom-bone{

  position: absolute;
  left: 150px;
  bottom: 300px;

}

.top-bone{
   position: absolute;
   right: 200px;
   top: 150px;


}

.contact-message {
  width: 40%;
  margin: 20px auto 30px;
}

.copyright{

     font-size: 1rem;
     padding:20px 0px;

}
.skill-row{
      width: 50%;
      margin: 100px auto 100px auto;
      text-align: left;

}

.intro {
   width:30%;
   margin: auto;

}

.pawprint {
   width: 25%;


}

.dog-ball {
  width: 35%;
  float: left;
  margin-right: 30px;

}

.dog-toy {
  width: 35%;
  float: right;
  margin-left: 30px;


}

hr{
  margin-top:40px;
  margin-bottom: 40px;
  border-style: none;
  border-top-style: dotted;
  border-color: grey;
  border-width:5px;
  width: 5%;

}

.style {

   margin-top:30px;
}

.boxer{

  
}

.myButton {
    margin-bottom: 20px;
    box-shadow: 0px 1px 0px 0px;
    background-color:#eae0c2;
    border-radius:6px;
    border:1px solid #333029;
    display:inline-block;
    cursor:pointer;
    color:#505739;
    font-family: 'Arial';
    font-size:14px;
    font-weight:bold;
    padding:9px 10px;
    text-decoration:none;
    text-shadow:0px 1px 0px #ffffff;
  }
  .myButton:hover {
    background-color:#ccc2a6;
  }
  .myButton:active {
    position:relative;
    top:1px;

  }

【讨论】：