css背景图片一篇文章带你了解CSS3 背景知识背景

CSS3包含几个新的背景属性，提供了对背景元素更好的控制。
首先，浏览器支持
表中的数字指定了完全支持此属性的第一个浏览器版本。
需要指定数字后面的前缀-webkit-或-moz。
属性:chromefirefossafarioperiebackground-image 4 . 09 . 03 . 63 . 111 . 5 background-size 4.0 1.0-WebKit-9 . 04 . 0 3.6-moz-4.1 3.0-WebKit-10.5 10.0 background-origin 1 . 09 . 00
二、CSS3多背景
CSS3允许您通过使用背景图像属性向一个元素添加多个背景图像。不同的背景图像用逗号隔开，图像叠加。
示例:有两个背景图像，第一个图像是背景图像，第二个图像是GIF动画。
代码如下:
项目
#范例1 {
背景图片:网址，网址；
背景-位置:右下方，左上方；
背景-重复:不重复，重复；
}
测试用的胡乱文字
这是一个很好的例子，也是一个很好的例子。
这是一个很小的挑战，因为这是一个很大的挑战。

背景大小属性的两个可能值是:包含和覆盖。
关键词比例的背景图要尽量大。因此，根据背景图像的比例和背景区域的位置，它可能不会被背景图像覆盖。
Cover关键字缩放背景图像，内容区域完全覆盖背景图像。因此，背景图像的某些部分在背景区域的位置可能不可见。
下面的示例演示了如何使用容器和盖子:
#div1 {
背景:网址；
背景尺寸:包含；
背景-重复:不重复；
}
#div2 {
背景:网址；
背景尺寸:封面；
背景-重复:不重复；
}

文章图片

2.定义多种尺寸的背景图像
当处理多个背景时，背景大小属性也接受多个背景值。
以下示例指定了三个背景图像，每个图像具有不同的背景大小值:
项目
#范例1 {
背景:网址左上不重复，网址右下不重复，网址左上重复；
填充:15px
背景尺寸:50px，130px，自动；
颜色:白色；
}
测试用的胡乱文字
这是一个很好的例子，也是一个很好的例子。
这是一个很小的挑战，因为这是一个很大的挑战。

文章图片

3.全尺寸背景图片
如果你想在网站上有一个覆盖整个浏览器窗口的背景图像。。
所需经费如下:
充满整个页面的图像
缩放图像
图像居中页面
没有滚动条
下面的例子演示了如何使用HTML元素。然后在背景上设置一个固定的中心。然后使用背景大小属性调整其大小:
项目
html {
背景:url无重复中心修复；
背景尺寸:封面；
【css背景图片一篇文章带你了解CSS3 背景知识】}
整个页面的背景图片
这是一个很好的例子，也是一个很好的例子。但是，这是一个很小的挑战
这是一个很好的例子。

文章图片

三.属性
1.背景-来源属性
CSS3背景原点属性指定背景图像的位置。
该属性有三个不同的值:
边框:背景图像从边框的左上角开始。
填充框:左上角背景图像的填充边缘。
内容框:左上角背景图像的内容
以下示例说明了背景原点属性:
#范例1 {
边框:10px纯黑；
填充:35px
背景:网址；
背景-重复:不重复；
}
#范例2 {