您的位置首页百科知识

css背景图片大小如何设置

css背景图片大小如何设置

的有关信息介绍如下:

css背景图片大小如何设置

我们现在经常会用到CSS,在编写过程中,会遇到CSS背景图像大小设置的问题,什么background-image?background-color?有点头大了吗?background-image的background-size(背景大小)应该怎么设置呢?小编来告诉你吧~

熟悉CSS(Cascading Style Sheets)即层叠样式表的朋友们都了解CSS,尤其是现在最新的版本CSS3是多么的简便,可以用简单的语言实现复杂的效果。尤其是在现在HTML5流行的时刻,CSS3实现了很多的动画效果。

我们在使用CSS语言来创作我们的“作品”的时候,特别是对于HTML5小白来说,会遇到这么一个问题:CSS背景图像的大小应该怎么设置呢?

纯色?or 图像?这是一个需要解决的问题!

(一)介绍一下背景色

我们可以使用background-color 属性为元素设置背景色。如:

p {background-color: ###;} ###为你要设置的背景颜色,如white-白色,gray-灰色等。但在这里我们主要讨论应用背景图像的问题。

要把图像应用成为背景,要使用background-image这一 属性。当background-image 属性默认值是 none的时候,这表示背景上没有放置任何图像。如果需要设置一个背景图像,必须为这个属性设置一个 URL 值,如:

body {background-image: url(/i/eg_bg_01.jpg);}

那么,怎样设置背景图像的大小呢?

我们可以通过background-size来设定背景图像的大小。它可以是像素(px)或者是百分比(%),举例说明:background-size:950px* 200px:这表示把背景图片大小调整为宽度950像素,高度200像素。

关于background-size的语法说明:

(1)属性名:background-size

(2)属性值:

* 其中 bg-size = [ | | auto ]{1,2} | cover | contain

(3)初始值:auto auto

(4)应用于:所有元素

(5)继承性:无

(6)百分比:后面会说明

(7)计算值:根据指定

语法解释:

length(长度),percentage(百分比)。我们可以根据给定长度值或者百分比来调整背景图片大小。

当auto为默认值,这三个值最小可重复一次,最大重复两次。

第一个值为图片宽度,第二个值为图片高度,不能为负值.

(1).假如只给一个值,那么第二个自动的为 'auto';

(2).假如为percentage(百分比)值,那么背景图大小根据相对的背景区域来做调整,这个背景区域是由background-origin来来决定的。

代码说明:

/* 一个值: 这个值指定图片宽度,第二个值为auto */

background-size: auto

background-size: 50%

background-size: 3em

background-size: 12px

/* 两个值: 第一个值指定图片的宽度,第二个值指定图片的高度 */

background-size: 50% auto

background-size: 3em 25%

background-size: auto 6px

background-size: auto auto

/*多重背景,用逗号隔开,在CSS语法中凡语法后跟*或者#,都是可以无限重复的,但必须用逗号隔开。 */

background-size: auto, auto /* 请区别于background-size: auto auto*/

background-size: 50%, 25%, 25%

background-size: 6px, auto, contain

background-size: inherit

朋友们,关于背景图像大小的设置,你们明白了吗?