CSS background 属性 | CSS 背景 | CSS教程

返回到:CSS 背景 | CSS教程

标签定义及使用说明

背景缩写属性可以在一个声明中设置所有的背景属性。

可以设置的属性分别是:background-color、background-position、background-size、background-repeat、background-origin、background-clip、background-attachment 和 background-image。

各值之间用空格分隔,不分先后顺序。可以只有其中的某些值,例如 background:#FF0000 URL(smiley.gif); 是允许的。

默认值:请参阅单独的属性
继承:no
版本:CSS1+ CSS3中的新的属性
JavaScript 语法:object object.style.background=”red url(smiley.gif) top left no-repeat”

语法

background:bg-color bg-image position/bg-size bg-repeat bg-origin bg-clip bg-attachment initial|inherit;

浏览器支持

表格中的数字表示支持该属性的第一个浏览器版本号。

属性谷歌IE火狐苹果opera
background1.04.01.01.03.5

所有主流浏览器都支持 background 属性。

注意:IE8和更早版本不支持一个元素多个背景图像。

注意:IE7和更早的版本不支持”继承”的值。 IE8 需要定义 !DOCTYPE。 IE9支持”继承”。

说明CSS
background-color指定要使用的背景颜色1
background-position指定背景图像的位置1
background-size指定背景图片的大小3
background-repeat指定如何重复背景图像1
background-origin指定背景图像的定位区域3
background-clip指定背景图像的绘画区域3
background-attachment设置背景图像是否固定或者随着页面的其余部分滚动。1
background-image指定要使用的一个或多个背景图像1

实例

在一个div元素中设置多个背景图像(并指定他们的位置):

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>Web176教程(web176.com)</title>
<style>
body
{ 
background: #00ff00 url('/wp-content/uploads/2022/02/CSS.jpg') no-repeat fixed center; 
}
</style>
</head>

<body>
<p>This is some text</p>
<p>This is some text</p>
<p>This is some text</p>
<p>This is some text</p>
<p>This is some text</p>
<p>This is some text</p>
<p>This is some text</p>
<p>This is some text</p>
<p>This is some text</p>
<p>This is some text</p>
<p>This is some text</p>
<p>This is some text</p>
<p>This is some text</p>
<p>This is some text</p>
<p>This is some text</p>
<p>This is some text</p>
<p>This is some text</p>
<p>This is some text</p>
<p>This is some text</p>
<p>This is some text</p>
<p>This is some text</p>
<p>This is some text</p>
<p>This is some text</p>
<p>This is some text</p>
</body>

</html>

作者:terry,如若转载,请注明出处:https://www.web176.com/cssprop/5757.html

(0)
打赏 支付宝 支付宝 微信 微信
terryterry
上一篇 2022年4月22日 下午3:09
下一篇 2022年4月22日 下午4:26

相关推荐

发表回复

登录后才能评论