如何制作具有背景位置和百分比值的可拖动背景图像？

要制作具有背景位置和百分比值的可拖动背景图像，可以通过CSS来实现。以下是一种实现方式：

首先，在HTML文件中创建一个具有背景图片的元素，比如一个<div>标签。

<div class="background-image"></div>

在CSS中，定义该元素的样式，并设置背景图片和相关属性。

.background-image {
  background-image: url(图片地址);
  background-position: left top;
  background-size: cover;
  width: 100%;
  height: 100%;
}

在background-image属性中，设置了要使用的背景图片的URL。background-position属性用于设置背景图片的位置，可以使用关键词（如left、top）或百分比值来进行定位。background-size属性用于设置背景图片的尺寸，使用cover可以让背景图片自适应元素的大小。

接下来，使用JavaScript监听鼠标移动事件，来实现可拖动效果。

var elem = document.querySelector('.background-image');
var dragging = false;
var posX, posY, mouseX, mouseY;

elem.addEventListener('mousedown', function(e) {
  dragging = true;
  posX = elem.scrollLeft;
  posY = elem.scrollTop;
  mouseX = e.clientX;
  mouseY = e.clientY;
});

elem.addEventListener('mouseup', function() {
  dragging = false;
});

elem.addEventListener('mousemove', function(e) {
  if (dragging) {
    var dx = e.clientX - mouseX;
    var dy = e.clientY - mouseY;
    elem.scrollTop = posY - dy;
    elem.scrollLeft = posX - dx;
  }
});

通过监听mousedown、mouseup和mousemove事件，可以实现当鼠标按下、抬起或移动时的相应操作。在鼠标按下时，记录当前元素的滚动位置和鼠标的坐标。在鼠标移动时，根据鼠标的移动距离来调整元素的滚动位置，实现拖动效果。

通过以上步骤，就可以制作具有背景位置和百分比值的可拖动背景图像。如果您在腾讯云上搭建网站，可以使用腾讯云的云服务器（CVM）来托管您的网站，并使用云数据库MySQL版来存储数据。