CSS中背景background使用详解

 时间:2024-10-13 11:50:18

1、设置背景为纯颜色。可以使用颜色名称,也可以使用六位或三位的十六进制颜色值,还可以使用rgb 代码的背景颜色。

CSS中背景background使用详解

2、设置背景为一张图片。背景图片默认处于左上角,设置背景图片的同时,还可以给背景一个颜色,在背景图片显示不了的地方,会以纯颜色显示。

CSS中背景background使用详解

3、设置图片背景的重复性。可以使用repeat-x设置水平方向的重复,使用repeat-y设置垂直方向的重复。

CSS中背景background使用详解

4、设置图片背景的位置。比较常用的位置有5个,分别是中间center,左边left,右边right,上top,下bottom。设置背景图片的位置前,需要先设置background-repeat为no-repeat,即背景图片不重复。

CSS中背景background使用详解

5、背景图片的位置不仅支持上面5种方式的位置,还可以使用background-position设置为百分比来定位背景图片的位置。第一个百分比是水平方向的位置,第二个百分比是垂直方向的位置。

CSS中背景background使用详解

6、除了百分比设置背景图片的位置,还可以使用像素值精确设置背景图片的位置。

CSS中背景background使用详解

7、设置背景图片的关联性。当页面较长,浏览器滚动条往下拉时,背景图片会跟随着往下滚动,如果不想背景图片跟随着往下滚动,可以设置background-attachment为fixed,固定背景图片的位置。

CSS中背景background使用详解
  • cabbage单词讲解视频
  • 教你使用抽出滤镜工具——抽出滤镜抠出狗尾巴草
  • PS:打造印象派墨染黑天鹅海报
  • PS浅灰海水调成蓝色海水
  • 如何用ps对人物进行二次曝光?
  • 热门搜索
    word里怎么打分数 上传视频怎么赚钱 原位癌是什么意思 怎么让自己变漂亮 如何补妆 985211大学是什么意思 装修后如何除甲醛 生活中的美作文 花怎么画图片 如何扑救初期火灾