div中添加背景图片及居中显示

原创于 2017-02-07 12:53:17 发布 · 1w 阅读

8 ·

CC 4.0 BY-SA版权

ASP.NET 专栏收录该内容

4 篇文章

订阅专栏

本文介绍了如何使用CSS实现div元素的居中布局，并通过设置背景图片和重复模式来美化页面。具体包括设置div的宽度和margin属性实现居中效果，使用background-image添加背景图片，以及使用background-repeat控制图片显示方式。

1、div元素的居中需要设置对应的宽度及左边边界的宽度，

margin后的参数可以是两个或者四个，两个时指的是上下、左右边界的宽度，四个时指的是上、右、下，左的边界宽度；

2、使用background-image将图片添加为背景；

3、使用background-repeat控制图片的拉伸模式。

<div style="width:100%;top:300px;">
    <div style="width: 80%; margin: 0 10%; background-image: url('../../Content/picture.png'); background-repeat: round">
        <p style="width:80%;margin:0 10% 0 10%;font-size:17px;color:black;font-family:YouYuan;line-height:200%">
            <br />
            这是第一行文字<br />
            这是第二行文字<br />
            这是第三行文字<br />
            这是第四行文字<br />
        </p>
    </div>
</div>