4.5 (案例) 背景大小

背景大小.png
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
    </head>
    <body>
    <style type="text/css">
    body{
        height: 500px;
    }
    </style>
        背景1
        css3背景:透明背景、渐变背景、背景原点控制、背景剪切控制
        background :   position repeat image color 
        
        background-size : 背景尺寸
            length: 长度值指定
            percentage: 百分比指定
            auto: 真实大小
        <!--    cover:等比缩放到完全覆盖容器,背景图像有可能超出容器
            把背景图像扩展至足够大,以使背景图像完全覆盖背景区域。
            背景图像的某些部分也许无法显示在背景定位区域中。  -->
            contain: 将背景图像等比缩放到宽度或高度与容器的宽度或高度相等,背景图像始终被包含在容器内
            把图像图像扩展至最大尺寸,以使其宽度和高度完全适应内容区域。
<style>
    body
        {
        background-image:url(images/5.jpg);
        /*background-size: 300px 500px;*/
        /*background-size: auto;*/
        /*background-size:800px 600px;*/
        /*background-size: cover; */
        /*等比缩放 可能超过容器%*/
        background-size:contain; 
        /*百分比指定*/
        /*background-size: 30% 100%;*/
        /*等比缩放 不可能超过容器
        继承父元素宽高
        */
        /*background-size: auto;*/
        /*实际大小*/
        background-repeat:no-repeat;
        padding-top:40px;
        }
</style>
    
        
        





    

        
    </body>
</html>

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

友情链接更多精彩内容