html背景图片全屏设置，但是却有白边，而且图片有些模糊

html-css08

html背景图片全屏设置，但是却有白边，而且图片有些模糊,第1张

1、出现白边是因为浏览器的内或者外边距默认值不为0：

你需要在head标签里加上：

<style type="text/css">

*{margin: 0padding: 0}

</style>

用以重置浏览器的内外边距默认值，将默认值改为0。

2、至于图片模糊，应该是你加载的图片分辨率不够，或者你加载图片的元素和图片宽高比差距较大。

HTML 中要设置背景的块大小  比如div    300px * 400px

那么背景图的最佳尺寸也是 300px 400px

然后设置 background: url(imgs/your.jpg)  no-repeat  center center

背景水平垂直居中，效果最佳

css样式background属性值详解

背景图无论是缩放还是扩展，都会失真变得模糊，所以尺寸最接近块的大小最好

不光绘制图片，在高分屏下，绘制文字和线条都会出现模糊的现象，GitHub上有一个hidpi-canvas-polyfill可以很好的解决这个问题，但是没有对图片进行处理。如果你了解了原因，解决这个问题也很容易。

首先，引入上方这个polyfill

然后，得到devicePixelRatio和backingStorePixelRatio的比例，可以使用下面的方法

var getPixelRatio = function(context) {

  var backingStore = context.backingStorePixelRatio ||

    context.webkitBackingStorePixelRatio ||

    context.mozBackingStorePixelRatio ||

    context.msBackingStorePixelRatio ||

    context.oBackingStorePixelRatio ||

    context.backingStorePixelRatio || 1

   return (window.devicePixelRatio || 1) / backingStore

}

//调用

var ratio = getPixelRatio(ctx)

之后，在调用ctx.drawImage()的时候，给width和height乘以ratio，如下：

ctx.drawImage(document.querySelector('img'), 10, 10, 300 * ratio, 90 * ratio)