PHP MySQL jquery HTML CSS

CSS教程手册 CSS高级 CSS基础教程 CSS中级教程 CSS3高级教程 CSS响应式设计 CSS网格教程 CSS实例

参考手册浏览器支持参考手册选择器参考手册组合器参考手册伪类参考手册伪元素参考手册函数参考手册动画相关属性网络安全字体字体回退单位颜色合法颜色值默认值参考手册实体听觉参考手册 accent-color align-content align-items align-self all animation animation-delay animation-direction animation-duration animation-fill-mode animation-iteration-count animation-name animation-play-state animation-timing-function aspect-ratio backdrop-filter backface-visibility background background-attachment background-blend-mode background-clip background-color background-image background-origin background-position background-position-x background-position-y background-repeat background-size block-size border border-block border-block-color border-block-end border-block-end-color border-block-end-style border-block-end-width border-block-start border-block-start-color border-block-start-style border-block-start-width border-block-style border-block-width border-bottom border-bottom-color border-bottom-left-radius border-bottom-right-radius border-bottom-style border-bottom-width border-collapse border-color border-end-end-radius border-end-start-radius border-image border-image-outset border-image-repeat border-image-slice border-image-source border-image-width border-inline border-inline-color border-inline-end border-inline-end-color border-inline-end-style border-inline-end-width border-inline-start border-inline-start-color border-inline-start-style border-inline-start-width border-inline-style border-inline-width border-left border-left-color border-left-style border-left-width border-radius border-right border-right-color border-right-style border-right-width border-spacing border-start-end-radius border-start-start-radius border-style border-top border-top-color border-top-left-radius border-top-right-radius border-top-style border-top-width border-width bottom box-decoration-break box-reflect box-shadow box-sizing break-after break-before break-inside caption-side caret-color @charset 规则 clear clip clip-path color color-scheme column-count column-fill column-gap column-rule column-rule-color column-rule-style column-rule-width column-span column-width columns @container 规则 content counter-increment counter-reset counter-set @counter-style 规则 cursor direction display empty-cells filter flex flex-basis flex-direction flex-flow flex-grow flex-shrink flex-wrap float font @font-face 规则 font-family font-feature-settings font-kerning @font-palette-values 规则 font-size font-size-adjust font-stretch font-style font-variant font-variant-caps font-weight gap grid grid-area grid-auto-columns grid-auto-flow grid-auto-rows grid-column grid-column-end grid-column-gap grid-column-start grid-gap grid-row grid-row-end grid-row-gap grid-row-start grid-template grid-template-areas grid-template-columns grid-template-rows hanging-punctuation height hyphens hyphenate-character image-rendering @import 规则 initial-letter inline-size inset inset-block inset-block-end inset-block-start inset-inline inset-inline-end inset-inline-start isolation justify-content justify-items justify-self @keyframes 规则 @layer 规则 left letter-spacing line-height list-style list-style-image list-style-position list-style-type margin margin-block margin-block-end margin-block-start margin-bottom margin-inline margin-inline-end margin-inline-start margin-left margin-right margin-top marker marker-end marker-mid marker-start mask mask-clip mask-composite mask-image mask-mode mask-origin mask-position mask-repeat mask-size mask-type max-block-size max-height max-inline-size max-width @media 规则 min-block-size min-inline-size min-height min-width mix-blend-mode @namespace 规则 object-fit object-position offset offset-anchor offset-distance offset-path offset-position offset-rotate opacity order orphans outline outline-color outline-offset outline-style outline-width overflow overflow-anchor overflow-wrap overflow-x overflow-y overscroll-behavior overscroll-behavior-block overscroll-behavior-inline overscroll-behavior-x overscroll-behavior-y padding padding-block padding-block-end padding-block-start padding-bottom padding-inline padding-inline-end padding-inline-start padding-left padding-top @page 规则 page-break-inside paint-order perspective perspective-origin place-content place-items place-self pointer-events position @property 规则 quotes resize right rotate row-gap scale @scope 规则 scroll-behavior scroll-margin scroll-margin-block scroll-margin-block-end scroll-margin-block-start scroll-margin-bottom scroll-margin-inline scroll-margin-inline-end scroll-margin-inline-start scroll-margin-left scroll-margin-right scroll-margin-top scroll-padding scroll-padding-block scroll-padding-block-end scroll-padding-block-start scroll-padding-bottom scroll-padding-inline scroll-padding-inline-end scroll-padding-inline-start scroll-padding-right scroll-padding-top scroll-snap-stop scroll-snap-type scrollbar-color shape-outside @starting-style 规则 @supports 规则 tab-size table-layout text-align text-align-last text-decoration text-decoration-color text-decoration-line text-decoration-style text-decoration-thickness text-emphasis text-emphasis-color text-emphasis-position text-emphasis-style text-indent text-justify text-orientation text-overflow text-shadow text-transform text-underline-offset text-underline-position top transform-origin transform-style transition transition-delay transition-duration transition-property transition-timing-function translate unicode-bidi user-select vertical-align visibility white-space widows width word-break word-spacing word-wrap writing-mode z-index zoom 简介 CSS HEX 颜色 HSL 颜色背景图像背景重复背景附着背景简写边框宽度边框颜色边框各边简写边框属性圆角边框外边距合并轮廓宽度轮廓颜色轮廓简写轮廓偏移文本对齐文字装饰文本转换文字间距文本阴影字体样式字体大小谷歌字体字体属性布局 - width 和 max-width 布局 - z-index 布局 - 溢出布局 - clear 和 clearfix 布局 - 浮动实例布局 - display: inline-block 垂直导航栏水平导航栏计数器网站布局特异性 !important 规则数学函数圆角边框图像多重背景颜色颜色关键字渐变径向渐变阴影效果 Box Shadow 文本效果 Web 字体 2D 转换 3D 转换过渡动画工具提示设置图像样式 object-fit object-position 遮罩按钮分页实例多列用户界面变量覆盖变量使用 JavaScript 更改变量在媒体查询中使用变量 @property 规则 Box Sizing Flexbox 媒体查询媒体查询 - 实例 - 简介网格容器网格项目

CSS教程手册

参考手册浏览器支持参考手册选择器参考手册组合器参考手册伪类参考手册伪元素参考手册函数参考手册动画相关属性网络安全字体字体回退单位颜色合法颜色值默认值参考手册实体听觉参考手册

CSS高级

accent-color align-content align-items align-self all animation animation-delay animation-direction animation-duration animation-fill-mode animation-iteration-count animation-name animation-play-state animation-timing-function aspect-ratio backdrop-filter backface-visibility background background-attachment background-blend-mode background-clip background-color background-image background-origin background-position background-position-x background-position-y background-repeat background-size block-size border border-block border-block-color border-block-end border-block-end-color border-block-end-style border-block-end-width border-block-start border-block-start-color border-block-start-style border-block-start-width border-block-style border-block-width border-bottom border-bottom-color border-bottom-left-radius border-bottom-right-radius border-bottom-style border-bottom-width border-collapse border-color border-end-end-radius border-end-start-radius border-image border-image-outset border-image-repeat border-image-slice border-image-source border-image-width border-inline border-inline-color border-inline-end border-inline-end-color border-inline-end-style border-inline-end-width border-inline-start border-inline-start-color border-inline-start-style border-inline-start-width border-inline-style border-inline-width border-left border-left-color border-left-style border-left-width border-radius border-right border-right-color border-right-style border-right-width border-spacing border-start-end-radius border-start-start-radius border-style border-top border-top-color border-top-left-radius border-top-right-radius border-top-style border-top-width border-width bottom box-decoration-break box-reflect box-shadow box-sizing break-after break-before break-inside caption-side caret-color @charset 规则 clear clip clip-path color color-scheme column-count column-fill column-gap column-rule column-rule-color column-rule-style column-rule-width column-span column-width columns @container 规则 content counter-increment counter-reset counter-set @counter-style 规则 cursor direction display empty-cells filter flex flex-basis flex-direction flex-flow flex-grow flex-shrink flex-wrap float font @font-face 规则 font-family font-feature-settings font-kerning @font-palette-values 规则 font-size font-size-adjust font-stretch font-style font-variant font-variant-caps font-weight gap grid grid-area grid-auto-columns grid-auto-flow grid-auto-rows grid-column grid-column-end grid-column-gap grid-column-start grid-gap grid-row grid-row-end grid-row-gap grid-row-start grid-template grid-template-areas grid-template-columns grid-template-rows hanging-punctuation height hyphens hyphenate-character image-rendering @import 规则 initial-letter inline-size inset inset-block inset-block-end inset-block-start inset-inline inset-inline-end inset-inline-start isolation justify-content justify-items justify-self @keyframes 规则 @layer 规则 left letter-spacing line-height list-style list-style-image list-style-position list-style-type margin margin-block margin-block-end margin-block-start margin-bottom margin-inline margin-inline-end margin-inline-start margin-left margin-right margin-top marker marker-end marker-mid marker-start mask mask-clip mask-composite mask-image mask-mode mask-origin mask-position mask-repeat mask-size mask-type max-block-size max-height max-inline-size max-width @media 规则 min-block-size min-inline-size min-height min-width mix-blend-mode @namespace 规则 object-fit object-position offset offset-anchor offset-distance offset-path offset-position offset-rotate opacity order orphans outline outline-color outline-offset outline-style outline-width overflow overflow-anchor overflow-wrap overflow-x overflow-y overscroll-behavior overscroll-behavior-block overscroll-behavior-inline overscroll-behavior-x overscroll-behavior-y padding padding-block padding-block-end padding-block-start padding-bottom padding-inline padding-inline-end padding-inline-start padding-left padding-top @page 规则 page-break-inside paint-order perspective perspective-origin place-content place-items place-self pointer-events position @property 规则 quotes resize right rotate row-gap scale @scope 规则 scroll-behavior scroll-margin scroll-margin-block scroll-margin-block-end scroll-margin-block-start scroll-margin-bottom scroll-margin-inline scroll-margin-inline-end scroll-margin-inline-start scroll-margin-left scroll-margin-right scroll-margin-top scroll-padding scroll-padding-block scroll-padding-block-end scroll-padding-block-start scroll-padding-bottom scroll-padding-inline scroll-padding-inline-end scroll-padding-inline-start scroll-padding-right scroll-padding-top scroll-snap-stop scroll-snap-type scrollbar-color shape-outside @starting-style 规则 @supports 规则 tab-size table-layout text-align text-align-last text-decoration text-decoration-color text-decoration-line text-decoration-style text-decoration-thickness text-emphasis text-emphasis-color text-emphasis-position text-emphasis-style text-indent text-justify text-orientation text-overflow text-shadow text-transform text-underline-offset text-underline-position top transform-origin transform-style transition transition-delay transition-duration transition-property transition-timing-function translate unicode-bidi user-select vertical-align visibility white-space widows width word-break word-spacing word-wrap writing-mode z-index zoom

CSS基础教程

CSS中级教程

布局 - width 和 max-width 布局 - z-index 布局 - 溢出布局 - clear 和 clearfix 布局 - 浮动实例布局 - display: inline-block 垂直导航栏水平导航栏计数器网站布局特异性 !important 规则数学函数

CSS3高级教程

圆角边框图像多重背景颜色颜色关键字渐变径向渐变阴影效果 Box Shadow 文本效果 Web 字体 2D 转换 3D 转换过渡动画工具提示设置图像样式 object-fit object-position 遮罩按钮分页实例多列用户界面变量覆盖变量使用 JavaScript 更改变量在媒体查询中使用变量 @property 规则 Box Sizing Flexbox 媒体查询媒体查询 - 实例

CSS响应式设计

- 简介

CSS网格教程

网格容器网格项目

CSS实例

CSS教程

更新时间2025-07-16

边框图像颜色

CSS 多重背景

CSS 允许您通过 background-image 属性为一个元素添加多幅背景图像。

不同的背景图像用逗号隔开，并且图像会彼此堆叠，其中的第一幅图像最靠近观看者。

下面的例子有两幅背景图像，第一幅图像是花朵（与底部和右侧对齐），第二幅图像是纸张背景（与左上角对齐）：

实例

#example1 {
  background-image: url(flower.gif), url(paper.gif);
  background-position: right bottom, left top;
  background-repeat: no-repeat, repeat;
}

运行实例 »

点击 "运行实例" 按钮查看在线实例

多重背景图像可以使用单独的背景属性（如上所述）或 background 简写属性来指定。

下面的例子使用 background 简写属性（结果与上例相同）：

实例

#example1 {
  background: url(flower.gif) right bottom no-repeat, url(paper.gif) left top repeat;
}

运行实例 »

点击 "运行实例" 按钮查看在线实例

CSS 背景尺寸

CSS background-size 属性允许您指定背景图像的大小。

可以通过长度、百分比或使用以下两个关键字之一来指定背景图像的大小：contain 或 cover。

下面的例子将背景图像的大小调整为比原始图像小得多（使用像素）：

Lorem Ipsum Dolor

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.

Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.

这是代码：

实例

#div1 {
  background: url(img_flower.jpg);
  background-size: 100px 80px;
  background-repeat: no-repeat;
}

运行实例 »

点击 "运行实例" 按钮查看在线实例

background-size 的其他两个可能的值是 contain 和 cover。

contain 关键字将背景图像缩放为尽可能大的尺寸（但其宽度和高度都必须适合内容区域）。这样，取决于背景图像和背景定位区域的比例，可能存在一些未被背景图像覆盖的背景区域。

cover 关键字会缩放背景图像，以使内容区域完全被背景图像覆盖（其宽度和高度均等于或超过内容区域）。这样，背景图像的某些部分可能在背景定位区域中不可见。

下面的例子展示了 contain 和 cover 的用法：

实例

#div1 {
  background: url(img_flower.jpg);
  background-size: contain;
  background-repeat: no-repeat;
}

#div2 {
  background: url(img_flower.jpg);
  background-size: cover;
  background-repeat: no-repeat;
}

运行实例 »

点击 "运行实例" 按钮查看在线实例

定义多个背景图像的尺寸

在处理多重背景时，background-size 属性还可以接受多个设置背景尺寸的值（使用逗号分隔的列表）。

下面的例子指定了三幅背景图像，每幅图像有不同的 background-size 值：

实例

#example1 {
  background: url(tree.png) left top no-repeat, url(flower.gif) right bottom no-repeat, 
  	url(paper.gif) left top repeat;
  background-size: 50px, 130px, auto;
}

运行实例 »

点击 "运行实例" 按钮查看在线实例

全尺寸背景图像

现在，我们希望网站上的背景图像始终覆盖整个浏览器窗口。

具体要求如下：

用图像填充整个页面（无空白）
根据需要缩放图像
在页面上居中图像
不引发滚动条

下面的例子显示了如何实现它：使用 <html> 元素（<html> 元素始终至少是浏览器窗口的高度）。然后在其上设置固定且居中的背景。最后使用 background-size 属性调整其大小：

实例

html {
  background: url(img_man.jpg) no-repeat center fixed; 
  background-size: cover;
}

运行实例 »

点击 "运行实例" 按钮查看在线实例

Hero Image

您还可以在 <div> 上使用不同的背景属性来创建 Hero Image（带有文本的大图像），并将其放置在您希望的位置上。

实例

.hero-image {
  background: url(img_man.jpg) no-repeat center; 
  background-size: cover;
  height: 500px;
  position: relative;
}

运行实例 »

点击 "运行实例" 按钮查看在线实例

CSS background-origin 属性

CSS background-origin 属性指定背景图像的位置。

该属性接受三个不同的值：

border-box - 背景图片从边框的左上角开始
padding-box -背景图像从内边距边缘的左上角开始（默认）
content-box - 背景图片从内容的左上角开始

下面的示例展示了 background-origin 属性：

实例

#example1 {
  border: 10px solid black;
  padding: 35px;
  background: url(flower.gif);
  background-repeat: no-repeat;
  background-origin: content-box;
}

运行实例 »

点击 "运行实例" 按钮查看在线实例

CSS background-clip 属性

CSS background-clip 属性指定背景的绘制区域。

该属性接受三个不同的值：

border-box - 背景绘制到边框的外部边缘（默认）
padding-box - 背景绘制到内边距的外边缘
content-box - 在内容框中绘制背景

下面的例子展示了 background-clip 属性：

实例

#example1 {
  border: 10px dotted black;
  padding: 35px;
  background: yellow;
  background-clip: content-box;
}

运行实例 »

点击 "运行实例" 按钮查看在线实例

CSS 高级背景属性

属性	描述
background	用于在一条声明中设置所有背景属性的简写属性。
background-clip	规定背景的绘制区域。
background-image	为一个元素指定一幅或多幅背景图像。
background-origin	规定背景图像的放置位置。
background-size	规定背景图像的大小。

边框图像颜色