背景のいくつかの属性スタイル

背景属性

/*background当设置背景图片时要设置元素的宽或高*/
background-color    背景颜色
background-image   背景图像
background-repeat   是否重复背景图
background-position   背景图像的位置
background-size     背景图片的尺寸(cover是填充整个屏幕,contain是自适用内容高度和宽度)
background-origin   规定background-position属性相对于什么位置来定位
(border-box|padding-box|content-box;)
background-clip     背景的绘制区域
(border-box|padding-box|content-box;)
background-attachment   背景的绘制区域(fixed,默认scroll)

/*背景图片的位置和尺寸一起使用时需使用/连接*/
background:  #00FF00 url(xx) no-repeat center/100% 100%;

背景サイズ
1のカバーとコンテインの違いリピートなしの場合、コンテナのアスペクト比が画像のアスペクト比と異なる場合、
カバー(塗りつぶし):画像のアスペクト比は変更されず、コンテナ全体の幅と高さをカバーし、画像の余分な部分を切り取ります;
含む(含む):画像自体のアスペクト比は変更されず、画像自体をズームしてトリミングせずに完全に表示できるため、コンテナ空白の領域があります;
2繰り返しの場合:
カバー:上記と同じ;含む:コンテナに少なくとも1つの完全な画像があり、背景の画像はコンテナの空白の領域にタイル表示され、敷設できないものは切り抜きます。

おすすめ

転載: blog.csdn.net/m0_48076809/article/details/107595817