css设置背景的方法

这篇文章给大家分享的是有关css设置背景的方法的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。

css设置背景的方法:1、使用【background】属性为元素设置一种纯色;2、使用【背景图像】属性为元素设置背景图像;3、背景属性可在一个声明中设置所有的背景属性。

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

<强> css设置背景的方法:

<强> 1,背景颜色属性

background属性为元素设置一种纯色。这种颜色会填充元素的内容、内边距和边框区域,扩展到元素边框的外边界(但不包括外边距)。如果边框有透明部分(如虚线边框),会透过这些透明部分显示出背景色。

透明值

尽管在大多数情况下,没有必要使用透明。不过如果您不希望某元素拥有背景色,同时又不希望用户对浏览器的颜色设置影响到您的设计,那么设置透明值还是有必要的。

<强> 2,背景图像属性

背景图像属性为元素设置背景图像。元素的背景占据了元素的全部尺寸,包括内边距和边框,但不包括外边距。

默认地,背景图像位于元素的左上角,并在水平和垂直方向上重复。

根据平铺方式属性的值,图像可以无限平铺,沿着某个轴(x轴或y轴)平铺,或者根本不平铺。

初始背景图像(原图像)根据背景位置属性的值放置。

<强> 3,背景属性

的背景是一个简写属性,可在一个声明中设置所有的背景属性。

可以设置如下属性:

<李>

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

<李>

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

<李>

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

<李>

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

<李>

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

<李>

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

<李>

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

<李>

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

注意:请设置一种可用的背景颜色,这样的话,假如背景图像不可用,页面也可获得良好的视觉效果。

示例:

& lt; ! DOCTYPE  html> 　　& lt; html> 　　& lt; head> 　　& lt; meta  charset=癠TF-8"祝辞 　　& lt; style> 　　div  { 　　宽度:400 px; 　　身高:200 px; 　　边界:1 px  solid 红色; 　　} 　　.demo1 { 　　background - color:苍白的宝石绿; 　　} 　　.demo2 { 　　背景图片:url (1. jpg); 　　background-size: 400 px; 　　} 　　.demo3 { 　　背景:paleturquoise  url (1. jpg),不再重演; 　　background-size: 300 px; 　　} 　　& lt;/style> 　　& lt;/head> 　　& lt; body> 　　& lt; div 类=癲emo1"祝辞纯色背景& lt;/div> 　　& lt; div 类=癲emo2"祝辞图片背景& lt;/div> 　　& lt; div 类=癲emo3"祝辞纯色+图片背景& lt;/div> 　　& lt;/body> 　　& lt;/html>

效果图:

感谢各位的阅读!关于“css设置背景的方法”这篇文章就分享到这里了,希望以上内容可以对大家有一定的帮助,让大家可以学到更多知识,如果觉得文章不错,可以把它分享出去让更多的人看到吧!

css设置背景的方法