(15)css常用样式 |
您所在的位置:网站首页 › 常用CSS属性和其含义 › (15)css常用样式 |
一、背景属性概述
CSS 中除了布局类属性,还需要添加一些背景类的内容进行页面的修 饰,从而让网页变得更加的美观。 CSS 中通过 background 属性来设置背景,它是一个综合属性,可以拆分成多个单一属性。 二、背景颜色 background-colorbackground-color 属性名:background-color作用:在盒子区域添加背景颜色的修饰。加载区域:在 border 及以内加载背景颜色。属性值:颜色名、颜色值。 三、背景图片 background-image属性名:background-image 作用:给盒子添加图片的背景修饰。 加载范围:默认的加载到边框及以内部分。后期如果图片不重复加载,加载从 border 以内开始。 属性值:url(图片路径) url:uniform resource locator,统一资源定位符,小括号内部书写查找图片的路径。 通过如上示例,我们看到加载的图片重复显示了,如何改变显示样式呢? 四、背景重复 background-repeat属性名:background-repeat 作用:设置添加的背景图是否要在盒子中重复进行加载。 根据属性值不同,有四种重复加载方式。该属性要和background-image属性同时使用,如果没有设置background-image属性则background-repeat属性将无效。 (1)repeat属性值(默认值:重复) (2)no-repeat属性值(不重复)注意:如果图片不重复,从 border 以内开始加载。 背景图和背景颜色可以同时设置,背景图会压盖背景颜色,没有背景图的区域会显示背景颜色。从 order 以内开始加载。 (3)repeat-x属性值(水平方向重复) (4)repeat-y属性值(垂直方向重复) 五、背景定位 background-position属性名:background-position 作用:主要用于设置不重复的图片在背景区域的加载开始位置。 属性值:分为三种写法,单词表示法、像素表示法、百分比表示法。不论哪种写法, 属性值都有两个,值之间用空格分隔。 第一个属性值:表示背景图片在水平方向的位置。 第二个属性值:表示背景图片在垂直方向的位置。 5.1单词表示法属性值都是使用代表方向的单词进行书写。 水平方向可选单词:left、center、right 垂直方向可选单词:top、center、bottom 单词表示图片与盒子背景区域进行对应方向的对齐。 5.2像素表示法使用像素值作为背景定位的属性值。 第一个属性值:像素是几,表示背景图片左上角针对 border 以内的左上顶点水平方向位移的距离。 第二个属性值:像素是几,表示背景图片左上角针对 border以内的左上顶点垂直方向位移的距离。注:图片的左上角是(0,0)原点。 探讨:前端坐标系和数学坐标系的区别?前端坐标系:向右向下是正,向左向上是负。 数学坐标系:向右向上是正,向左向下是负。 像素值区分正负,正负代表位移方向不同: 正数:表示图片针对盒子的原点向右、向下移动。 负数:表示图片针对盒子的原点向左、向上移动。 注:可以利用属性值为负数,制作在小盒子中显示大的背景图的一部分。 制作方法,需要使用 FW 软件量取尺寸,读取数据。 第一步:在设计图中,使用切片工具制作一个想要显示区域大小的切片,让切片左 上顶点位于想要加载的背景部分。 第二步:读取属性栏的切片数据,其中宽、高就是要加载的盒子的宽高,x 和 y 的数 值表示移动的距离的绝对值,直接将数值加负号赋值给背景定位属性。二步:读取属的切片数据,其中宽、高是要加载的盒子的宽高,动的距离的绝对值,直接将数值加负号赋值给背 5.3百分比表示法百分比表示法使用百分比数字作为属性值。 100%代表的数值: 水平方向,等价于盒子的border以内的背景区域宽度减去图片的宽度。 垂直方向,等价于盒子的border以内的背景区域高度减去图片的高度。 六、背景附着 background-attachment 属性名:background-attachment 作用:设置的是背景图片是否要随着页面或者盒子的滚动而滚动。 属性值: 七、background属性的综合写法background 属性可以将五个单一属性的值进行合写。 属性值:可以有 1-5 个属性值,值之间用空格进行分隔,背景定位的两个属性值算作一个属性值,不能被分开也不能颠倒顺序。五个属性值之间可以互换位置。 示例1:颠倒书写顺序不会影响样式效果 示例2:颠倒background-position背景定位 建议按照如下规范书写: background: url(images/bg4.jpg) no-repeat center top fixed #ccc; 八、background属性的综合写法的注意事项 注意1:如果属性值没有设置完全,其他没有设置的单一属性会按照默认值加载。 注意2:如果想去层叠综合属性中的一部分,其他的属性保持不变,最好使用单一属性写法进行层叠。 示例1:我们可以看到,如果不使用单一属性会导致只有背景颜色生效,其他的被层叠成默认样式了,因为我们使用的是background综合属性去书写的。 示例2:我们可以看到,如果使用单一属性会只是单独改变一种样式,其他的不会被层叠掉。作用:在盒子区域添加背景颜载区域:在 border 及以内加载背景颜色。色名、颜色值。 |
今日新闻 |
推荐新闻 |
CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3 |