你能用这个属性制作背景图片吗:
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 时,可以调整其余元素的大小。目前,当我按下按钮时,其余元素开始调整大小,但背景图像不执行任何操作。
有人知道如何调整它的大小吗?
最佳答案
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/
关于html - CSS:按 ctrl + 减号调整背景图像大小,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/25388233/