Question

我正在尝试在响应式设计中固定的响应图像上设置标签元素位置。但是A标签元素未设置在固定位置。这是我尝试过的。

function SetSize() {
  var imgW = 1920;
  var imgH = 1080;
  var winW = $(window).width();
  var winH = $(window).height();
  var scaleW = winW / imgW;
  var scaleH = winH / imgH;
  var fixScale = Math.max(scaleW, scaleH);
  var setW = imgW * fixScale;
  var setH = imgH * fixScale;
  var moveX = Math.floor((winW - setW) / 2);
  var moveY = Math.floor((winH - setH) / 2);
  $('#bg').css({
    'width': setW,
    'height': setH,
    'left': moveX,
    'top': moveY
  });
}

.status {
  left: 36.1%;
  top: 15.6%;
}

#contents a {
  position: absolute;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<html xmlns="http://www.w3.org/1999/xhtml">

<head runat="server">
</head>

<body>
  <img src="test.jpg" width="100%" height="100%" id="bg" />
  <div id="contents">
    <a href="" class="status">On</a>
  </div>
</body>

</html>

Answer 1

我建议为主体（和height: 100%）添加margin: 0来固定body的高度，该高度是img和{{ 1}}。另外，我将a应用于图像，以避免由于成为嵌入式元素而在图像下方出现下降空间。

display: block

function SetSize() {
  var imgW = 1920;
  var imgH = 1080;
  var winW = $(window).width();
  var winH = $(window).height();
  var scaleW = winW / imgW;
  var scaleH = winH / imgH;
  var fixScale = Math.max(scaleW, scaleH);
  var setW = imgW * fixScale;
  var setH = imgH * fixScale;
  var moveX = Math.floor((winW - setW) / 2);
  var moveY = Math.floor((winH - setH) / 2);
  $('#bg').css({
    'width': setW,
    'height': setH,
    'left': moveX,
    'top': moveY
  });
}

html,
body {
  height: 100%;
  margin: 0;
}

img#bg {
  display: block;
}

.status {
  left: 36.1%;
  top: 15.6%;
}

#contents a {
  position: absolute;
}

Answer 2

我发现创建图像叠加层的最佳方法是在app.post('/', (req, response) => { var users = [{ 'username': 'test@gmail.com', 'password': 'test' }] users.map((user, index) => { obj.login(index) .then(res => { obj.getBalance(index).then(scratchCards => { // Render when balancé recieved }); obj.getScratchCards(index).then(scratchCards => { // Render when cards recieved }); });的div上使用background-image，然后在该div内使用position: relative创建叠加层div。然后，您要做的就是告诉position: absolute所需的大小，然后叠加层将移动到需要移动的位置。

CSS

image-container

HTML

  .image-container{
      background-image: url('path/to/image.png');
      background-size: cover;
      width: 100%;
      height: 100%;
      position: relative;
  }

  .image-container .overlay{
     position: absolute;
     left: 36.1%;
     top: 15.6%;
  }

Answer 3

一件事，您的标签没有关闭。

使用CSS在固定位置的响应图像上设置元素

3 个答案: