css如何设置图片背景

css是一种用来表现HTML或XML等文件样式的计算机语言,主要是用来设计网页的样式,使网页更加美化。它也是一种定义样式结构如字体,颜色,位置等的语言,并且css样式可以直接存储于HTML网页或者单独的样式单文件中,而样式规则的优先级由css根据这个层次结构决定,从而实现级联效果,发展至今,css不仅能装饰网页,也可以配合各种脚本对于网页进行格式化。

css设置图片背景的方法:1、使用背景图像属性,语法”背景图片:url(& # 39;图片地址& # 39;);”;2、使用背景属性,语法”背景:url(& # 39;图片地址& # 39;);“。

本教程操作环境:windows7多系统,CSS3&, HTML5版,戴尔G3电脑。

在css中,可以使用背景图像属性或者背景属性来设置图片背景。

<强> css背景图像属性

背景图像属性设置一个元素的背景图像。

元素的背景是元素的总大小,包括填充和边界(但不包括边距)。

默认情况下,背景图像放置在元素的左上角,并重复垂直和水平方向。

属性值:

<李>

url (& # 39; url # 39;)指向图像的路径。

<李>

没有默认值。不显示背景图像。

<李>

继承规定应该从父元素继承背景图像属性的设置。

示例:

& lt; ! DOCTYPE  html> 　　& lt; html> 　　 　　& lt; head> 　　& lt; meta  charset=皍tf-8"祝辞 　　& lt; title> css设置背景图片& lt;/title> 　　& lt; style> 　　body  { 　　背景图片:url (& # 39; img/1. jpg # 39;); 　　} 　　& lt;/style> 　　& lt;/head> 　　 　　& lt; body> 　　 　　& lt;/body> 　　 　　& lt;/html>

效果图:

<强> css背景属性

背景属性是专门设置背景的属性,它是一个简写属性,可以在一个声明中设置所有的背景属性。(学习视频分享:css视频教程)

背景可以设置的属性:

<李>

background:规定要使用的背景颜色。

<李>

背景位置:规定背景图像的位置。

<李>

background-size:规定背景图片的尺寸。

<李>

平铺方式:规定如何重复背景图像。

<李>

background-origin:规定背景图片的定位区域。

<李>

background-clip:规定背景的绘制区域。

<李>

background-attachment:规定背景图像是否固定或者随着页面的其余部分滚动。

<李>

背景图片:规定要使用的背景图像。

可以看出背景图像属性就是给html页面设置背景图片的属性,下面看看它的用法

背景图片:url (1. jpg);

这样在url()里给出图片的路径,就可以给div盒子设置一个背景图片;看似简单,但有一点要注意,设置背景图片的盒子必须要有实质的宽度与高度,这样才可以让背景图片在显示屏上显示。

上面的这些背景属性如果一个一个的设置是不是感到繁琐,其实有些属性是可以放在一起设置的,这样的css背景表达可以节约且优化了css文件代码。例:

背景:url (bgimg.gif), no-repeat  5 px  5 px;

如下图解释:

示例:

& lt; ! DOCTYPE  html> 　　& lt; html> 　　,,,& lt; head> 　　,,,,,,,& lt; meta  charset=癠TF-8"比; 　　,,,,,,,& lt; title>背景图片设置& lt;/title> 　　,,,,,,,& lt; style> 　　,,,,,,,,,,,.demo { 　　,,,,,,,,,,,,,,,位置:固定; 　　,,,,,,,,,,,,,,,:,0; 　　,,,,,,,,,,,,,,,左:,0; 　　,,,,,,,,,,,,,,,宽度:100%; 　　,,,,,,,,,,,,,,,身高:100%; 　　,,,,,,,,,,,,,,,min-width:, 1000 px; 　　,,,,,,,,,,,,,,,z - index: -10; 　　,,,,,,,,,,,,,,,变焦:,1; 　　,,,,,,,,,,,,,,,背景颜色:,# fff; 　　,,,,,,,,,,,,,,,背景:,url (img/1. jpg); 　　,,,,,,,,,,,,,,,平铺方式:,不再重演; 　　,,,,,,,,,,,,,,,background-size:,封面; 　　,,,,,,,,,,,,,,,-webkit-background-size:,封面; 　　,,,,,,,,,,,,,,,-o-background-size:,封面; 　　,,,,,,,,,,,,,,,背景位置:,center  0; 　　,,,,,,,,,,,} 　　,,,,,,,& lt;/style> 　　,,,& lt;/head> 　　,,,& lt; body> 　　,,,,,,,& lt; div 类=癲emo"祝辞& lt;/div> 　　null 　　null

css如何设置图片背景