从photoshop到html的背景

从photoshop到html的背景,html,css,photoshop,Html,Css,Photoshop,我在photoshop中为我的网站创建了一个背景图像,我希望它能像在photoshop中一样应用到我的网页上 如何在不使用css中的repeat属性的情况下,将创建的图像用于我的网站背景。我希望这个背景能够在不丢失任何效果/渐变的情况下填充屏幕,并且能够以每种分辨率工作 我可以不导出屏幕全分辨率的图像吗?或任何其他替代方式。或者我需要以屏幕的全分辨率进行导出。要创建全屏图像,请使用css: html { background: #e7e9ef url('image.jpg') no-repeat

我在photoshop中为我的网站创建了一个背景图像,我希望它能像在photoshop中一样应用到我的网页上

如何在不使用css中的repeat属性的情况下,将创建的图像用于我的网站背景。我希望这个背景能够在不丢失任何效果/渐变的情况下填充屏幕,并且能够以每种分辨率工作


我可以不导出屏幕全分辨率的图像吗?或任何其他替代方式。或者我需要以屏幕的全分辨率进行导出。

要创建全屏图像,请使用css:

html {
background: #e7e9ef url('image.jpg') no-repeat center center fixed;
-webkit-background-size: 100%;
-moz-background-size: 100%;
-o-background-size: 100%;
background-size: 100%;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
min-height: 100%; 
}

body {
min-height: 100%; 
margin: 0;
padding: 0;
}
您的图像不必是全屏分辨率-它会被拉伸,但当然要达到不错的效果,您应该使用相当大的图像-我使用1920px 1285px,但当然它需要尽可能地压缩

你也应该考虑如果用户使用移动设备访问网站会发生什么。大的图像需要大量的传输,所以你也应该考虑准备小的图像和使用媒体查询来给这样的用户更小的图像。