最好的方式来对齐图像png文件左下角

Best way to align image png file to bottom left?

本文关键字：图像 png 文件 左下角 对齐 方式      更新时间：2023-09-26

我想把这张图片添加到左下角，但是它的标题一直在标题下面。有什么建议来解决这个问题吗?或者我要去哪里出错?最后一个代码是我想要对齐的代码。

https://i.stack.imgur.com/bQsim.jpg & lt;网站的正常外观

https://i.stack.imgur.com/IN5z1.jpg & lt;当我添加img代码

Jsfiddle

https://jsfiddle.net/fecr9w0t/, togetherjs = ODnAazMkx8

HTML 

<!DOCTYPE html>
<html>
       <head>
       <title> Home - A.Willi A.G</title>
       <link rel="stylesheet" href="index.css" type="text/css" />
       </head>
       <body>
       <h1 align="center">
       <a href="index.html"><img src="logo.png" alt="A.Willi A.G" /></a>
       </h1>
       <div class="menu_div">
       <ul>
       <li><a href="index.html">Home</a></li> 
       <li class="dropdown">
       <a href="#" class="dropbtn">Bewerber</a>
       <div class="dropdown-content">
       <a href="#">Info</a>
       <a href="#">Jobs</a>
       </div>
       </li>
       <li class="dropdown"><a href="#" class="dropbtn">Kunde</a>
       <div class="dropdown-content">
       <a href="personalverleih.html">Personalverleih</a>
       <a href="toolrental.html">Werkzeuge Mieten</a>
       <a href="referenzen.html">Referenzen</a>
       <a href="quali.html">Qulität, Sicherheit und Weiterbildung</a>
       </div>
       </li>
       <li><a href="kontakt.html">Kontakt</a></li>
       </ul>
       </div>
       <div class="fadein"> 
       <img src="welder1.png">
       <img src="welder2.png">
       <img src="welder3.png"> 
       </div>
       <div class="fadein img">
       </div>


       <img src="swissstaffing_sqs_logo_cmyk.png" alt="Swiss Staffing" >


</body>       
</html>
CSS 

body { font-family: verdana; background:white ; color: white; }
.menu_div{background-color: #333; width:100%;}
ul {
    list-style-type: none;
    margin: 0 auto;
    display:table;
    padding: 0;
    z-index: 100;
    overflow: hidden;
}
li {
    float: left;
}
li a, .dropbtn {
    display: inline-block;
    color: white;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
}
li a:hover, .dropdown:hover .dropbtn {
    background-color: black;
}
li.dropdown {
    display: inline-block;
}
.dropdown-content {
    display: none;
    position: absolute;
    background-color: #f9f9f9;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 100;
}
.dropdown-content a {
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
    text-align: left;
}
.dropdown-content a:hover {background-color: #f1f1f1}
.dropdown:hover .dropdown-content {
    display: block;
}
        @keyframes fade {
        0%   { opacity: 0; }
        11.11%   { opacity: 1; }
        33.33%  { opacity: 1; }
        44.44%  { opacity: 0; }
        100% { opacity: 0; }
}
    .fadein { position:absolute; height:102px; width:50px; outline: 1px solid blue; }
    .fadein img { position:absolute; left:0; right:0; opacity:0; animation-name: fade; animation-duration: 9s; animation-iteration-count: infinite; }
    .fadein img:nth-child(1) { animation-delay: 0s;  }
    .fadein img:nth-child(2) { animation-delay: 3s;  }
    .fadein img:nth-child(3) { animation-delay: 6s;  }
.menu_div { 
  position: relative;
  z-index: 0;
  border: dashed;
  height: 2.9em;
  margin-bottom: 0em;
  margin-top: 0em;
  z-index:1000;

}
.fadein { 
  position: relative;
  z-index: 3; 
  background: ;
  width: 100%;
  left: 1px;
  top: 0em;
  }
.fadein img{
    margin:0 auto;
    width: 100%;
    max-width: 4060px;
    min-width: 900px;
    max-height: 500%;
}

Javascipt 

$("#slideshow > div:gt(0)").hide();
setInterval(function() {
  $('#slideshow > div:first')
    .fadeOut(1000)
    .next()
    .fadeIn(1000)
    .end()
    .appendTo('#slideshow');
}, 3000);

下面是我试图修复的代码

<img src="swissstaffing_sqs_logo_cmyk.png" alt="Swiss Staffing" >

我已经尝试使用下面的代码，但它没有工作时，试图对齐

.container {
    position: relative;
}
.bottomright {
    position: absolute;
    bottom: 8px;
    right: 16px;
    font-size: 18px;
}
img { 
    width: 100%;
    height: auto;
    opacity: 0.3;
}
</style>
</head>
<body>
<h2>Image Text</h2>
<p>Add some text to an image in the bottom right corner:</p>
<div class="container">
  <img src="trolltunga.jpg" alt="Norway" width="1000" height="300">
  <div class="bottomright">Bottom Right</div>
</div>

如果你想让图像始终在页面上的某个位置对齐，那么你必须给它"position:absolute"，然后你可以定义"bottom:0;"answers"left:0"，这将解决你的定位问题。

如果你只是给它指定相对于页面的位置，如果你想让它绝对定位在一个容器内那么你必须给父容器指定position:relative

希望有帮助!:)

通过添加

   <img src="swissstaffing_sqs_logo_cmyk.png" height=80 style="position:fixed;bottom:0px;left:0px;z-index:999" />

为助人为乐的人干杯

相关文章：