background-size之详解

贵哥的编程之路

发布于 2020-10-28 10:12:52

6670

发布于 2020-10-28 10:12:52

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>112-背景尺寸属性</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        ul{
            width: 800px;
            height: 500px;
            margin: 0 auto;
        }
        ul li{
            list-style: none;
            float: left;
            width: 200px;
            height: 200px;
            margin: 30px 30px;
            border: 1px solid #000;
            text-align: center;
            line-height: 200px;
        }
        ul li:nth-child(1){
            background: url("images/dog.jpg") no-repeat;
        }
        ul li:nth-child(2){
            background: url("images/dog.jpg") no-repeat;
            /*
            第一个参数:宽度
            第二个参数:高度
            */
            background-size:200px 100px;
        }
        ul li:nth-child(3){
            background: url("images/dog.jpg") no-repeat;
            /*
            第一个参数:宽度
            第二个参数:高度
            */
            background-size:100% 80%;
        }
        ul li:nth-child(4){
            background: url("images/dog.jpg") no-repeat;
            /*
            第一个参数:宽度
            第二个参数:高度

            
            */
            background-size:auto 100px;
        }
        ul li:nth-child(5){
            background: url("images/dog.jpg") no-repeat;
            /*
            第一个参数:宽度
            第二个参数:高度
            */
            background-size:100px auto;
        }
        ul li:nth-child(6){
            background: url("images/dog.jpg") no-repeat;
            /*
            cover含义:
            1.告诉系统图片需要等比拉伸
            2.告诉系统图片需要拉伸到宽度和高度都填满元素
            */
            background-size:cover;
        }
        ul li:nth-child(7){
            background: url("images/dog.jpg") no-repeat;
            /*
            cover含义:
            1.告诉系统图片需要等比拉伸
            2.告诉系统图片需要拉伸到宽度或高度都填满元素
            */
            background-size:contain;
        }
    </style>
</head>
<body>
<!--
1.什么是背景尺寸属性
背景尺寸属性是CSS3中新增的一个属性, 专门用于设置背景图片大小
-->
<ul>
    <li>默认</li>
    <li>具体像素</li>
    <li>百分比</li>
    <li>宽度等比拉伸</li>
    <li>高度等比拉伸</li>
    <li>cover</li>
    <li>contain</li>
</ul>
</body>
</html>

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

原始发表：2020/09/22 ，如有侵权请联系 cloudcommunity@tencent.com 删除

background