css背景图片设置

 时间:2024-10-13 22:59:55

1、首先在项目目录中添加一张图片

css背景图片设置

2、编写HTML,为body添加style,添加背景图片,代码如下

css背景图片设置

3、页面显示结果如下图所示,这是重复平铺背景图片的效果

css背景图片设置

4、可以加上background-repeat:no-repeat设醅呓择锗置为不平铺,默认为平铺即repeat,也可以设置为repeat-x 使图片只在水平方向上平铺或repeat-y 使图片只在垂直方向上平铺,代码如下

css背景图片设置

5、设置为不平铺之后页面显示结果如下图所示

css背景图片设置

6、还可以使用background-position设置图片的位置,background-position后面的值可以为top、bottom、left、right、center等,举例如下

css背景图片设置

7、页面展示效果如图,因为top = top center = center top = 50% 0%,表示居中的意思

css背景图片设置

8、关键词的解释如下:top left = left top = 0% 0%top = top center = center top = 50% 0%right top = top right = 100% 0%left = left center = center left = 0% 50%center = center center = 50% 50%right = right center = center right = 100% 50%bottom left = left bottom = 0% 100%bottom = bottom center = center bottom = 50% 100%bottom right = right bottom = 100% 100%

  • HTML中引入css和js的方法
  • 相对路径与绝对路径的区别是什么
  • Visual Studio Code编辑的内容在网页显示不出来
  • html文本区域大小怎么设置
  • css如何设置鼠标悬停a标签改变背景色
  • 热门搜索
    喉咙痒咳嗽怎么办 马应龙痔疮膏怎么用 十宗罪作者为什么坐牢 急性荨麻疹怎么治疗 玫瑰花怎么养才不会枯萎 油焖大虾的做法家常 红烧鸭子的做法大全 touch怎么读 清蒸鲈鱼怎么做 怎么切翡翠原石