在CSS中，如何响应地将元素粘贴到某个背景图像部分？

and keep it in the the same, as possible, position, relatively to the background image, while resizing (i.e. open in different devices) ?

并且在调整大小(即在不同设备中打开)时,将其保持在相对于背景图像相同的位置?

For example, there is a background image of building, and on top of it, it is required to create a hover button that should be on the left top corner of it:

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

.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>

https://jsfiddle.net/saxzfoe2/

This looks nice in 720px width, but any changes to the screen size make this roll out of required position, where to dig ? maybe, some help of media queries should do the thing ?

这在720px宽度看起来不错,但是对屏幕尺寸的任何改变都会使这个滚动到所需的位置,在哪里挖?也许,媒体查询的一些帮助应该做的事情?

(tried with % and em instead of px but still same stuff)

(尝试用%和em而不是px但仍然是相同的东西)

2 个解决方案

#1

if you want to keep the button on the position's background you want ,you should be use the media query for 4 break point.

如果你想将按钮保持在你想要的位置背景上,你应该使用媒体查询4个断点。

add this code on the css :

在css上添加此代码:

html, body{
 height: 100%;
}

and edite the "background-size : cover " to "contain ".

并将“background-size:cover”编辑为“包含”。

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

after that use the media query , for example (it's a sample!) :

之后使用媒体查询,例如(这是一个示例!):

@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%;
   }
}

find your Break Point on Chrome.

在Chrome上找到您的断点。

#2

Add the following rule in your top on the css file.

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

html, body{
   height: 100%;
}

#1