html - CSS:按 ctrl + 减号调整背景图像大小

Question

你能用这个属性制作背景图片吗:

html,body
{
  height: 100%;
  width: 100%;
  padding: 0;
  margin: 0;
  background-color: #ebebeb;
  background: url('../images/background.jpg') center center no-repeat;
  -webkit-background-size: cover;
 -moz-background-size: cover;
 -o-background-size: cover;
 background-size: cover; 
}

当您在浏览器上使用 CTRL 和 MINUS 时，可以调整其余元素的大小。目前，当我按下按钮时，其余元素开始调整大小，但背景图像不执行任何操作。

有人知道如何调整它的大小吗？

Answer 1

CSS 中的背景图像独立于 HTML 呈现，因此很难获取 css 背景并通过任何类型的脚本对其应用规则。

您可以通过将背景放在 html 中并通过 JavaScript 对其进行操作，或者可能通过使用 CSS 预处理器(如 SASS)来更改此设置。

这是一个使用 key 监听器的 JavaScript 变通方法。

您需要先获取键盘的输入并将其存储在一个变量中:

var key = 0;
while (condition to check for keypresses...)
document.addEventListener('keydown', function(event) {
    if(event.keyCode == 17) { //17 = ctrl
        alert('ctrl was pressed');
        key = key + 1; //key = 1 
    }
    else if(event.keyCode == 173) { //173 = minus
        alert('minus was pressed');
        key = key + 1; //=2

    }
});

一旦键盘输入正常工作，您需要一个调整图像大小的函数:

function resizeBase64Img(base64, width, height) {
    var canvas = document.createElement("canvas");
    canvas.width = width;
    canvas.height = height;
    var context = canvas.getContext("2d");
    var deferred = $.Deferred();
    $("<img/>").attr("src", "data:image/gif;base64," + base64).load(function() {
        context.scale(width/this.width,  height/this.height);
        context.drawImage(this, 0, 0); 
        deferred.resolve($("<img/>").attr("src", canvas.toDataURL()));               
    });
    return deferred.promise();    
}

比你需要运行那个函数:

if (key == 2) ...

resizeBase64Img(oldBase64, 100, 100).then(function(newImg){
    $("body").append(newImg);
});

请记住为新的打印机将您的 key 变量重置为零!

这是调整图像大小的基本示例:http://jsfiddle.net/paulitto/Sk7LA/1/
按键监听教程:http://blog.cnizz.com/2008/10/27/javascript-key-listener/
JavaScript 键码:http://www.scripttheweb.com/js/ref/javascript-key-codes/