背景样式

最新推荐文章于 2024-03-06 20:44:31 发布

weixin_34351321

最新推荐文章于 2024-03-06 20:44:31 发布

阅读量72

点赞数

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/lujieting/p/10182577.html

<style>
        div{
            width: 300px;
            height: 500px;
            border: 1px solid red;
            /*添加背景*/
            background-image: url("images/img/bg-img.jpg");
            /*background-image: url("images/img/share1.png");*/
            background-repeat: no-repeat;

            /*设置背景图片的大小  宽度/高度   宽度/auto(保持比例自动缩放)
            建议：在使用这个属性之前衔确定宽高比与容器的宽高比是否一致，否则会造成图片失真变形*/
            background-size: 300px 500px;
            background-size: 300px;
            /*设置百分比，是参照父容器可放置内容区域的百分比*/
            background-size: 50% 50%;

            /*设置contain:按比例调整图片大小，使用图片宽高自适应整个元素的背景区域，使图片全部包含在容器内
            1.图片大于容器：有可能造成容器的空白区域,将图片缩小
            2.图片小于容器：有可能造成容器的空白区域，将图片放大*/
            background-size: contain;

            /*cover:与contain刚好相反，背景图片会按比例缩放自 适应整个背景区域，如果背景区域不足以包含所有背景图片，图片内容会溢出
            1.图片大于容器：等比例缩小，会填满整个背景区域，有可能造成图片的某些区域不可见
            2.图片小于容器：等比例放大，填满整个背景区域，图片有可能造成某个方向上内容的溢出*/
            background-size: cover;
        }
    </style>
    </head>
<body>
<div></div>