手机css3图片背景效果

现在的手机已经成为我们生活中不可或缺的一部分，随着互联网的发展，手机应用日益丰富，网页设计也越来越重要，其中，图片背景效果是实现网页设计中常用的一种技术，而使用CSS3制作图片背景效果则非常简单，下面就来介绍一下。

background-image: url(图片URL);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
    

上面的代码主要是针对图片背景效果部分，下面分别举例说明：

background-image: url('图片URL');
    

这里需要写入需要使用的图片URL地址，可以是在线图片地址，也可以是相对地址，一般情况下建议采用相对地址。

background-size: cover;
    

此处的background-size属性的值可以设置为： auto、length、cover、contain，默认值为auto，而cover的意思是：尽量将背景图片放大展示，直到铺满整个背景区域，也就是说，无论原图大小，都可以完美展示。

background-repeat: no-repeat;
    

重复部分主要是针对连续的背景，一般情况下建议设置为no-repeat，否则当图像不足时会出现“镶嵌”的情况。

background-position: center center;
    

此处设置的是背景图片的位置，由于一般情况下背景图片大于背景区域，所以我们需要根据客户端的显示结果来决定如何显示，这里的center center就是将图片的中心对齐到背景区域的中心。

经过上述的代码设置，我们就可以实现一张完美的图片背景效果，不同的是每个效果的背景图片大小、重复部分、位置都存在一定差异。

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！