Is there a way to preserve the quality of a background image when scaling upward?

问题

I'm currently trying to set the background image for this toy app I am working on. By looking around on SO, I saw the following code being recommended:

body {
background: url(../images/download.jpeg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}

However the image quality still looks terrible on my desktop. The original dimensions of the image are 168px(h) and 300px(w).

Any help is appreciated!

回答1:

The image is small, so in order to make the quality better, you would need to find a higher resolution version of the same image. It also depends on the devices resolution.

回答2:

You will need to convert your existing image or find an image that is in vector format (.svg, .eps, etc.). this will allow you to scale your image up without it becoming pixelated as is often the case with raster image formats (.jpg, .png, etc.).

If you are interested in the difference between vector and raster images, see the following excerpts fromthis article on Raster vs Vector images:

Raster images' dimensions are measured in pixels. Because raster images cannot be enlarged without losing quality, different suppliers have specific size requirements for their processes; they require a specific pixel resolution: a specific amount of pixels within each inch. The amount of pixels within each inch in the image represents the image pixel resolution or ppi (pixels per inch)

...

Vector graphics are made of mathematical calculations that form objects or lines - they do not use pixels therefore they are resolution-independent.

hope this helps!

回答3:

There are different ways to approach this. The CSS code you posted basically takes your image and stretches it so it covers the entire <body> element of your website (which is basically the browser screen size).

There is no way to make a small image look good when blown up. What can be done is storing different sizes of the image and using media queries to load specific images based on screen size.

Say you store 3 different sizes:

image_large.jpg (2000 x 2000)
image_medium.jpg (1000 x 1000)
image_small.jpg (500 x 500)

You can then use CSS to load the appropriate one based on screen size:

@media screen and (min-width: 0px) and (max-width: 1000px) {
    body {
        background: url(../images/image_small.jpg) no-repeat center center fixed;
        -webkit-background-size: cover;
        -moz-background-size: cover;
        -o-background-size: cover;
        background-size: cover;
    }
}

@media screen and (min-width: 1001px) and (max-width: 2000px) {
    body {
        background: url(../images/image_medium.jpg) no-repeat center center fixed;
        -webkit-background-size: cover;
        -moz-background-size: cover;
        -o-background-size: cover;
        background-size: cover;
    }
 }

 @media screen and (min-width: 2001px) {
    body {
        background: url(../images/image_large.jpg) no-repeat center center fixed;
        -webkit-background-size: cover;
        -moz-background-size: cover;
        -o-background-size: cover;
        background-size: cover;
    }
}

This prevents mobile devices with small screens for loading unnecessarily large images. However, like I said before, if you don't have a higher resolution of the source image, you are out of luck.

来源：https://stackoverflow.com/questions/35119867/is-there-a-way-to-preserve-the-quality-of-a-background-image-when-scaling-upward

标签

html

css

background-size