background属性怎么用

2024-01-17 15:40 小编

       CSSbackground属性

 

  作用:background简写属性在一个声明中设置所有的背景属性。

 

  基本语法:

 

  background:bg-colorbg-imageposition/bg-sizebg-repeatbg-originbg-clipbg-attachment;

 

  参数:

 

  background-color:指定要使用的背景颜色。

 

  background-image:指定要使用的一个或多个背景图像。

 

  background-position:定背景图像的位置。

 

  background-size:指定背景图片的大小。

 

  background-repeat:指定如何重复背景图像。

 

  background-origin:指定背景图像的定位区域。

 

  background-clip指定背景图像的绘画区域。

 

  background-attachment:设置背景图像是否固定或者随着页面的其余部分滚动。

 

  注:IE8以及更早的浏览器不支持一个元素多个背景图像。

 

  说明:如果上述的值缺少一个也没关系,例如:可以只设置背景图片,background:url('smiley.gif')no-repeat;

 

  CSSbackground属性的使用示例

 

  <!DOCTYPEhtml>

 

  <html>

 

  <head>

 

  <metacharset="utf-8">

 

  <title>php中文网(php.cn)</title>

 

  <metacharset="utf-8">

 

  <style>

 

  body

 

  {

 

  background:#00ff00url('https://img.php.cn/upload/article/000/000/024/5c6a208c1ad5b114.gif')no-repeatfixedcenter;

 

  }

 

  </style>

 

  </head>

 

  <body>

 

  <p>这是一些测试文本。</p>

 

  <p>这是一些测试文本。</p>

 

  <p>这是一些测试文本。</p>

 

  <p>这是一些测试文本。</p>

 

  <p>这是一些测试文本。</p>

 

  <p>这是一些测试文本。</p>

 

  <p>这是一些测试文本。</p>

 

  <p>这是一些测试文本。</p>

 

  <p>这是一些测试文本。</p>

 

  <p>这是一些测试文本。</p>

 

  <p>这是一些测试文本。</p>

 

  <p>这是一些测试文本。</p>

 

  <p>这是一些测试文本。</p>

 

  <p>这是一些测试文本。</p>

 

  <p>这是一些测试文本。</p>

 

  <p>这是一些测试文本。</p>

 

  <p>这是一些测试文本。</p>

 

  <p>这是一些测试文本。</p>

 

  <p>这是一些测试文本。</p>

 

  <p>这是一些测试文本。</p>

 

  <p>这是一些测试文本。</p>

 

  <p>这是一些测试文本。</p>

 

  <p>这是一些测试文本。</p>

 

  <p>这是一些测试文本。</p>

 

  </body>

 

  </html>


1705475674640.png



Tag: 怎么
在线咨询 拨打电话

电话

13363039260

微信二维码

微信二维码