CSS基础教程5——背景

简介: 背景属性用于定义元素的背景效果。

CSS基础教程5——背景


CSS基础教程5——背景


背景属性用于定义元素的背景效果。


背景色(bgc)


background-color:值;


默认透明色,背景色会撑满整个盒子或模型,背景色不单单可以设置整体,还可以为任何HTML元素设置背景色,例如:<div><h1>等等。


背景图片(bgi)


background-image:url(图片路径);


图片本身时可以设置宽度和高度的,图片路径一样推荐使用相对路径,图片建议保存在项目目录下的img文件夹中,背景图片和背景色不同不是默认撑满整个盒子或模型,默认情况下图像会重复以覆盖整个盒子或模型(如果盒子或模型大小比图片小则图片无法展示全部),背景图片会根据图片本身大小导入,使用背景图像时,请使用不会干扰文本的图像。


图片比盒子或模型小时的效果

1.png

图片比盒子或模型大时的效果

1.png


背景平铺(bgr)


background-repeat:值;


值默认平铺repeat,不平铺no-repeat(从盒子或模型左上角开始覆盖直到图片完全显示或者图片未完全显示盒子或模型已满),水平平铺repeat-x(图片第一次覆盖后水平重复),纵向平铺repeat-y(图片第一次覆盖后垂直重复)。


背景位置


background-position:水平方向位置 垂直方向位置;


水平方向取值:left center right,垂直方向取值:top center bottom或者数字+px。

1.png


背景相关属性连写


background:color image repeat position;


与font属性不同的时背景相关属性的连写是可以不严格按照顺序书写(还是推荐使用这种顺序),并且值可以选择需要的书写(不用全部值都取)。


背景附着(bga)


background-attachment:值;


常用的值有两种,fixed(指定应该固定背景图像)、scroll(指定背景图像应随页面的其余部分一起滚动),背景附着一般比较少用,如果使用时希望连写可以写成background:color image repeat attachment position;

相关文章
|
3月前
|
前端开发 JavaScript
Vue中使用纯CSS实现全屏网格加渐变色背景布局
Vue中使用纯CSS实现全屏网格加渐变色背景布局
80 0
|
5月前
|
移动开发 JavaScript 前端开发
Vue系列教程(05)- 基础知识快速补充(html、css、js)
Vue系列教程(05)- 基础知识快速补充(html、css、js)
108 0
|
9天前
|
前端开发
【CSS进阶】使用CSS gradient制作绚丽渐变纹理背景效果(下)
【CSS进阶】使用CSS gradient制作绚丽渐变纹理背景效果
49 0
|
12天前
|
前端开发 JavaScript Java
《手把手教你》系列技巧篇(十九)-java+ selenium自动化测试-元素定位大法之By css下卷(详细教程)
【4月更文挑战第11天】按计划今天宏哥继续讲解css的定位元素的方法。但是今天最后一种宏哥介绍给大家,了解就可以了,因为实际中很少用。
35 2
|
14天前
|
前端开发 JavaScript Java
《手把手教你》系列技巧篇(十八)-java+ selenium自动化测试-元素定位大法之By css中卷(详细教程)
【4月更文挑战第10天】本文主要介绍了CSS定位元素的几种方法,包括ID属性值定位、其他属性值定位和使用属性值的一部分定位。作者提供了示例代码,展示了如何使用这些方法在Java+Selenium自动化测试中定位网页元素。通过CSS选择器,可以更精确地找到页面上的特定元素,如输入框、按钮等,并进行相应的操作,如输入文本、点击等。文章还提供了实际运行代码后的控制台输出和浏览器动作的示例。
49 0
|
15天前
|
前端开发 JavaScript Java
《手把手教你》系列技巧篇(十七)-java+ selenium自动化测试-元素定位大法之By css上卷(详细教程)
【4月更文挑战第9天】本文介绍了CSS定位方式的使用,包括它的优势和8种常用的定位方法。CSS定位相比XPath定位更快、更稳定。文章通过示例详细讲解了如何使用CSS定位元素,包括通过id、name、class name、tag name、link text、partial link text以及XPath进行定位。还提供了Java代码示例来演示如何在自动化测试中使用这些定位方法。
39 1
|
1月前
|
前端开发 容器
CSS背景background八种属性
CSS背景background八种属性
|
3月前
|
前端开发
使用CSS实现网格+渐变背景色的Web页面背景
使用CSS实现网格+渐变背景色的Web页面背景
29 0
|
3月前
|
前端开发 JavaScript 容器
【详细教程】HTML、CSS 和 JS 实现一个任务管理工具-ToDoList
【详细教程】HTML、CSS 和 JS 实现一个任务管理工具-ToDoList
43 1
【详细教程】HTML、CSS 和 JS 实现一个任务管理工具-ToDoList
|
3月前
|
前端开发 容器
CSS:元素显示模式与背景
CSS:元素显示模式与背景
29 0