CSS之定位,background属性

本文介绍了CSS中position属性的使用方法,包括相对定位、绝对定位、固定定位等,并详细解释了background复合属性及其各子属性如背景颜色、背景图片等的设置方式。

定位

关于定位 
我们可以使用css的position属性来设置元素的定位类型,postion的设置项如下:

  • relative 生成相对定位元素,元素所占据的文档流的位置不变,元素本身相对文档流的位置进行偏移
  • absolute 生成绝对定位元素,元素脱离文档流,不占据文档流的位置,可以理解为漂浮在文档流的上方,相对于上一个设置了相对或者绝对或者固定定位的父级元素来进行定位,如果找不到,则相对于body元素进行定位。
  • fixed 生成固定定位元素,元素脱离文档流,不占据文档流的位置,可以理解为漂浮在文档流的上方,相对于浏览器窗口进行定位。
  • static 默认值,没有定位,元素出现在正常的文档流中,相当于取消定位属性或者不设置定位属性
  • inherit 从父元素继承 position 属性的值

定位元素特性 
绝对定位和固定定位的块元素和行内元素会自动转化为行内块元素

定位元素层级 
定位元素是浮动的正常的文档流之上的,可以用z-index属性来设置元素的层级

典型定位布局 
1、固定在顶部的菜单
2、水平垂直居中的弹框
3、固定的侧边的工具栏

4、固定在底部的按钮

background属性

属性解释 
background属性是css中应用比较多,且比较重要的一个属性,它是负责给盒子设置背景图片和背景颜色的,background是一个复合属性,它可以分解成如下几个设置项:

  • background-color 设置背景颜色
  • background-image 设置背景图片地址
  • background-repeat 设置背景图片如何重复平铺
  • background-position 设置背景图片的位置
  • background-attachment 设置背景图片是固定还是随着页面滚动条滚动

实际应用中,我们可以用background属性将上面所有的设置项放在一起,而且也建议这么做,这样做性能更高,而且兼容性更好,比如:“background: #00FF00 url(bgimage.gif) no-repeat left center fixed”,这里面的“#00ff00”是设置background-color;“url(bgimage.gif)”是设置background-image;“no-repeat”是设置background-repeat;“left center”是设置background-position;“fixed”是设置background-attachment,各个设置项用空格隔开,有的设置项不写也是可以的,它会使用默认值。

举例:
下面这些例子使用下面这张图片做为背景图:


CSS中的`background`属性是一个简写属性,允许在一个声明中设置多个与背景相关的子属性。这种简写方式不仅简化了代码,还能提高可读性和维护性。以下是`background`属性的详细解析及其使用方法: ### 1. `background-color` `background-color`用于设置元素的背景颜色。该属性的取值可以是颜色名称、十六进制颜色值、RGB值或关键字`transparent`(默认值,表示透明)[^4]。例如: ```css background-color: #FF0000; /* 红色背景 */ background-color: rgb(255, 0, 0); /* 红色背景 */ background-color: red; /* 红色背景 */ background-color: transparent; /* 透明背景 */ ``` ### 2. `background-image` `background-image`用于为元素设置一个或多个背景图像。其取值为`url()`函数,指向图像文件的路径。如果同时设置了`background-color`和`background-image`,背景图像会覆盖在背景颜色之上[^4]。例如: ```css background-image: url("image.jpg"); ``` ### 3. `background-repeat` `background-repeat`用于控制背景图像的重复方式。该属性的取值包括`repeat`(默认值,横向和纵向重复)、`no-repeat`(不重复)、`repeat-x`(仅横向重复)和`repeat-y`(仅纵向重复)[^4]。例如: ```css background-repeat: no-repeat; /* 背景图像不重复 */ background-repeat: repeat-x; /* 背景图像横向重复 */ ``` ### 4. `background-attachment` `background-attachment`决定背景图像是否固定或随页面滚动。其取值包括`scroll`(默认值,背景图像随页面滚动)和`fixed`(背景图像固定在视口内)[^1]。例如: ```css background-attachment: fixed; /* 背景图像固定 */ ``` ### 5. `background-position` `background-position`用于控制背景图像的初始位置。该属性通常以两个值的形式出现,分别表示水平方向和垂直方向的位置。取值可以是关键字(如`left`、`center`、`right`、`top`、`bottom`)或百分比、长度值[^4]。例如: ```css background-position: center; /* 背景图像居中 */ background-position: 50% 50%; /* 背景图像居中 */ background-position: left top; /* 背景图像左上角对齐 */ ``` ### 6. `background-size` `background-size`用于控制背景图像的大小。其取值可以是具体的长度值、百分比或关键字`auto`(保持原始大小)[^1]。例如: ```css background-size: 100px 200px; /* 背景图像大小为100x200像素 */ background-size: cover; /* 背景图像覆盖整个元素 */ background-size: contain; /* 背景图像按比例缩放以适应元素 */ ``` ### 7. `background-origin` `background-origin`用于指定背景图像的定位区域。其取值包括`border-box`(相对于边框盒定位)、`padding-box`(相对于内边距盒定位)和`content-box`(相对于内容盒定位)[^2]。例如: ```css background-origin: padding-box; /* 背景图像相对于内边距盒定位 */ ``` ### 8. `background-clip` `background-clip`用于规定背景的绘制区域。其取值与`background-origin`相同,包括`border-box`、`padding-box`、`content-box`和`text`(背景仅绘制在文本下方)。例如: ```css background-clip: content-box; /* 背景仅绘制在内容盒内 */ ``` ### 9. 简写属性 `background` `background`是一个简写属性,可以在一次声明中定义多个背景相关属性。其书写顺序通常为:`background-color`、`background-image`、`background-repeat`、`background-attachment`、`background-position`。例如: ```css background: #FF0000 url("image.jpg") no-repeat fixed center; ``` 上述代码等价于: ```css background-color: #FF0000; background-image: url("image.jpg"); background-repeat: no-repeat; background-attachment: fixed; background-position: center; ``` ### 10. 使用示例 以下是一个完整的示例,展示了如何使用`background`属性设置一个具有背景颜色、背景图像、不重复、固定位置和居中对齐的元素: ```css div { width: 300px; height: 200px; background: #FF0000 url("image.jpg") no-repeat fixed center; } ``` 通过合理使用`background`属性及其子属性,可以实现丰富的背景效果,从而提升网页的视觉表现力。 ---
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值