css3--背景

CSS3中包含几个新的背景属性,提供更大背景元素控制。

在本章您将了解以下背景属性:

  • background-image
  • background-size
  • background-origin
  • background-clip

CSS3中可以通过background-image属性添加背景图片。

不同的背景图像和图像用逗号隔开,所有的图片中显示在最顶端的为第一张。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>css3背景</title>  
<style type="text/css">
  * {
      margin: 0;
      padding: 0;
  }
  
  .rcorners {
    width: 500px;
    height: 300px;
    margin: 20px auto;
    border:1px solid red;
    background-image: url(250x250px.gif), url(smiley.gif);
    background-position: right bottom, 20px center;
    background-repeat: no-repeat, no-repeat;
  }

</style>
</head>
<body>
  <div class="rcorners"></div>
</body>
</html>

效果如下:

猜你喜欢

转载自www.cnblogs.com/qjuly/p/9013973.html