要使用 CSS 制作拖拽图片上传效果，需要使用 HTML5 的拖放 API 和一些 CSS 样式。首先，需要在 HTML 中添加一个 <input> 元素，设置 type 属性为 "file"，并添加 id 和 name 属性。
<input type="file" id="fileInput" name="fileInput" />然后，需要使用 CSS 样式将该元素隐藏，如下所示：
#fileInput {
display: none;
}接下来，需要添加一个元素作为拖放区域，并设置相应的 CSS 样式。例如，可以添加一个 <div> 元素，并设置宽度、高度、边框和背景颜色等样式。
<div id="dropArea">将图片拖拽到此处</div>#dropArea {
width: 200px;
height: 200px;
border: 2px dashed #ccc;
background-color: #f5f5f5;
}然后，需要为该元素添加拖放事件处理程序，以便在拖放文件时执行相应的操作。具体来说，需要处理 dragover、dragenter、dragleave 和 drop 事件。例如，可以使用以下 JavaScript 代码为拖放区域添加事件处理程序：
var dropArea = document.getElementById('dropArea');
// 防止浏览器默认行为
dropArea.addEventListener('dragover', function(e) {
e.preventDefault();
});
// 拖入文件时更新样式
dropArea.addEventListener('dragenter', function(e) {
dropArea.style.borderStyle = 'solid';
dropArea.style.backgroundColor = '#fff';
});
// 拖出文件时恢复样式
dropArea.addEventListener('dragleave', function(e) {
dropArea.style.borderStyle = 'dashed';
dropArea.style.backgroundColor = '#f5f5f5';
});
// 放置文件时执行相应操作
dropArea.addEventListener('drop', function(e) {
e.preventDefault();
// 获取文件列表
var files = e.dataTransfer.files;
// 处理文件
handleFiles(files);
});最后，需要在 handleFiles() 函数中处理拖放上传的文件。具体来说，可以使用 FileReader 对象读取文件并将其显示在页面上，或者将文件上传到服务器。这部分操作涉及到服务器端代码，不在本回答的讨论范围之内。
综上所述，要使用 CSS 制作拖拽图片上传效果，需要使用 HTML5 的拖放 API 和一些 CSS 样式，并为拖放区域添加事件处理程序来处理拖放上传的文件。