Css:随着窗口大小调整而上下移动的图像

这是我的第一个网站，我正在使用我的Raspberry Pi为家庭自动化制作它。

我将超链接图像并将它们用作激活 python 脚本的按钮。

问题是我正在尝试创建类似面板的东西，我添加了钢纹理并将其居中。我现在正在尝试将图像放在其顶部以用作按钮;但是，当调整浏览器大小时，我的图像上下移动。

我正在尝试制作一个响应式设计，以便能够在手机上使用它。

代码（它们是HTML和CSS的两个独立文件，但我只是将它们放在彼此之上）：

@charset "UTF-8";
/* Body */
body {
  font-family: source-sans-pro;
  background-color: #f2f2f2;
  margin-top: 0px;
  margin-right: 0px;
  margin-bottom: 0px;
  margin-left: 0px;
  font-style: normal;
  font-weight: 200;
}
.container {
  width: 90%;
  margin-left: auto;
  margin-right: auto;
  height: 1000px;
  background-color: #FFFFFF;
}
header {
  width: 100%;
  height: 6%;
  background-color: #E0115F;
  border-bottom: 1px solid #2C9AB7;
}
.logo {
  color: #fff;
  font-weight: bold;
  text-align: undefined;
  width: 45%;
  float: left;
  margin-top: 15px;
  margin-left: 25px;
  letter-spacing: 4px;
  overflow: hidden;
}
.hero_header {
  color: #FFFFFF;
  text-align: center;
  margin-top: 0px;
  margin-right: 0px;
  margin-bottom: 0px;
  margin-left: 0px;
  letter-spacing: 4px;
  font-size: 50px;
}
.controls {
  padding-top: 5px;
}
.pi_logo_top{
  position: relative;
  float: right;
  right: 15px;
  top: 5px;
  height: 80%;
  min-width: 5%;
  max-width: none;
}
.controls {
  background: -webkit-linear-gradient(top, #1e5799 0%,#2989d8 50%,#207cca         99%,#7db9e8 100%); /* Chrome10-25,Safari5.1-6 */;
}
.lights_off {
  position: relative;
  max-width: 8%;
  min-width: none;
  overflow: hidden;
  right: -10px;
  top: -200px;
}
#rcorners {
  border-radius: 45px;
  background-position: left top;
  background-repeat: repeat;
  padding: 5px; 
  padding-right: 0px;
  padding-left: 0px;
  width: 90%;
  position: relative;
}

<!doctype html>
	<html lang="en-US">
	<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>Raspberry Pi Home Automation</title>
	<link href="css/singlePageTemplate.css" rel="stylesheet" type="text/css">
	<link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet" type="text/css">
	<script>var __adobewebfontsappname__="dreamweaver"</script>
	<script src="http://use.edgefonts.net/source-sans-pro:n2:default.js" type="text/javascript"></script>
	</head>
	<body>
	 <div class="container"> 
	  <header> <a href="">
	    <h4 class="logo">Home Automation</h4>
	    <img src = "https://seeklogo.com/images/R/raspberry-pi-logo-8240ABBDFE-seeklogo.com.png" alt = "Raspberry Pi Logo" class = "pi_logo_top">
	  </a>
	  </header>
	    <div class="controls">
	        <center><img src = "https://image.freepik.com/free-photo/dirty-metal-texture_1048-4784.jpg" id = "rcorners"  alt=""></center>
	    </div>
	    <div>
	        <img src="images/Light_off.png" class="lights_off" alt="light off"> 
	    </div>
	</div>
	</body>
	</html>

我们专门研究当我调整浏览器大小时它.lights_off { position: relative; max-width: 8%; min-width: none; overflow: hidden; right: -10px; top: -200px; }上下移动。

我想把它放在某个地方，并希望它留在那里。

您只需要创建一个容器来包装图像并使用 flex 来定位图像。但是图像必须在标签.controls内，然后您可以绝对定位包装器：

.HTML：

<div class='image_container'>
    <img src="//your image" class="lights_off" alt="light off"> 
</div>

.CSS：

.controls{
position: relative;
}
.lights_off {
  max-width: 8%;
  min-width: none;
  overflow: hidden;
}
.image_container{
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  top: 0;
}

在此处查看演示代码：https://codepen.io/tien-bui/pen/EGweXJ

当你调整浏览器的大小时，div的高度会发生变化，所以top：-200px不起作用是正常的。您应该将图像放在上面的div中，并给它一个绝对位置，然后放置百分比而不是px。

 <style>
 .lights_off {
  position:absolute;
  max-width: 8%;
  min-width: none;
  bottom:20%;
  z-index:99
  right: -10px;
}
 </style>
      <div class="controls">
            <center><img src = "https://image.freepik.com/free-photo/dirty-metal-texture_1048-4784.jpg" id = "rcorners"  alt=""></center>

            <img src="images/Light_off.png" class="lights_off" alt="light off"> 
        </div>

相关内容

最新更新

热门标签：