Html 在css中，如何响应地将元素粘贴到特定的背景图像部分？_Html_Css_Media Queries

Html 在css中，如何响应地将元素粘贴到特定的背景图像部分？

html css

Html 在css中，如何响应地将元素粘贴到特定的背景图像部分？,html,css,media-queries,Html,Css,Media Queries,并在调整大小（即在不同设备中打开）时，尽可能将其保持在与背景图像相对的相同位置例如，有一个建筑物的背景图像，在其顶部，需要创建一个悬停按钮，该按钮应位于其左上角： .bg { /* the background */ background-image: url(http://www.everbluetraining.com/sites/default/files/u47558/commercial-buildings.jpg); backgroun

并在调整大小（即在不同设备中打开）时，尽可能将其保持在与背景图像相对的相同位置

例如，有一个建筑物的背景图像，在其顶部，需要创建一个悬停按钮，该按钮应位于其左上角：

.bg 
{
    /* the background */
    background-image:       url(http://www.everbluetraining.com/sites/default/files/u47558/commercial-buildings.jpg);
    
   background-size: cover;
   background-repeat: no-repeat;
   width: 100%
   height:100%;
}

.mybtn 
{
   /* button image */
    background-image: url(http://www.clipartbest.com/cliparts/dc8/ok9/dc8ok9nMi.png);
    height: 30px;
    width: 30px;
    background-size: cover;
    margin-top: 30px;
    margin-left: 85px;
}

.mybtn:hover 
{
    opacity: 0.5;
}


<body class="bg">
    <div class="mybtn"></div>
</body>

.bg
{
/*背景*/
背景图片：url(http://www.everbluetraining.com/sites/default/files/u47558/commercial-buildings.jpg);
背景尺寸：封面；
背景重复：无重复；
宽度：100%
身高：100%；
}
.mybtn
{
/*按钮图像*/
背景图片：url(http://www.clipartbest.com/cliparts/dc8/ok9/dc8ok9nMi.png);
高度：30px；
宽度：30px；
背景尺寸：封面；
边缘顶部：30px；
左边距：85像素；
}
.mybtn:悬停
{
不透明度：0.5；
}

这在720px的宽度上看起来不错，但屏幕大小的任何变化都会使这个卷超出所需的位置，在哪里挖掘？也许，一些媒体查询的帮助应该可以做到这一点

（尝试使用%和em而不是px，但仍然是相同的内容）

在css文件的顶部添加以下规则

html, body{
   height: 100%;
}

如果要将按钮保留在职位背景上，则需要使用媒体查询4断点

在css上添加以下代码：

html, body{
 height: 100%;
}

并将

背景尺寸：cover

编辑为

contain

.bg {
  position : relative; // important
  background-size : contain;
}
.myBtn{
   position : absolute;
}

然后使用媒体查询，例如（这是一个示例！）：

在Chrome上找到您的断点。

谢谢！这是更好的，但按钮仍然推出时，我使屏幕更宽，也许有一些解决办法存在这个问题？也许，有可能对这些东西进行媒体查询？

@media all and (min-width:720px) and (max-width: 767px){
  .myBtn{
      left : 10%;
      top  : 15%;
   } 
}
@media all and (min-width:768px) and (max-width:960px){
  .myBtn{
     left : 20%;
     top  : 15%;
   }
}