css简单学习属性2---背景图片

weixin_34056162

于 2017-04-28 11:40:00 发布

阅读量71

点赞数

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/kaiwen1/p/6780882.html

本文介绍了一种使用CSS设置多个背景图片的方法，并详细说明了如何让这些图片在不同的位置显示及重复方式。通过具体示例代码，展示了如何指定图片的位置、重复类型以及盒子的尺寸。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
       div{
           background-image: url("图片1.png"),url("图片2.jpg");
           /*图片1在x轴重复，图片2不重复*/
           background-repeat: repeat-x,no-repeat;
           background-position: 100%,100%,center,center;
           /*盒子大小*/
           width: 100px;
           height: 800px;
       }
    </style>
</head>
<body>
<div>
</div>
</body>
</html>