css盒模型设置什么属性可以显示背景

 时间:2024-10-14 00:32:36

1、打开vscode,创建一个测试html页面,用于演示css的背景设置效果

css盒模型设置什么属性可以显示背景

2、在测试页面中,添加一个div,设置固定高宽,以及边框,用于后续的背景效果演示。另外,在测试页面的同级目录下,添加一张演示图片

css盒模型设置什么属性可以显示背景

3、背景颜色设置,使用background-color属性,这个属性的值可以是red、blue这类颜色名称,也可以是rgb或者16进制的颜色编码

css盒模型设置什么属性可以显示背景

4、背景图片设置,使用background-image属性,通过这个属性中的url,设置背景图片的路径即可

css盒模型设置什么属性可以显示背景

5、背景图片的位设置,使用background-position属性。这个属性的值,可以是百分比,px像素值,top、right、bottom、left、center等等距离的值

css盒模型设置什么属性可以显示背景

6、背景图片是否允许重复,使用background-repeat属性,当值为no-repeat的时候,表示不允妓罹鐾岭许重复。当值为repeat的时候,表示水平、垂直方形都自动重复。repeat-x、repeat-y则只在一个方向上重复

css盒模型设置什么属性可以显示背景

7、背景图片的大小设置,使用background-size属性,当值为两个100% 100%的时候,就能自动拉伸图片,填满窗口

css盒模型设置什么属性可以显示背景
  • html5利用option标签定义下拉列表中的一个选项
  • border-radius的使用详解
  • css如何把div变成椭圆形
  • HTML-图文排版如何以代码实现
  • 用js怎么实现一个div显示时间2秒后就自动消失
  • 热门搜索
    数学小故事手抄报 安全教育手抄报大全 日行一善手抄报内容 有关节约用水的手抄报 法制小报手抄报 爱的手抄报图片 有关消防的手抄报 山水手抄报 交通手抄报的内容 文字手抄报