css background 属性详解

最新推荐文章于 2023-03-27 20:16:26 发布

上晴下雪

最新推荐文章于 2023-03-27 20:16:26 发布

阅读量397

点赞数

分类专栏： css 文章标签： html css

本文链接：https://blog.csdn.net/xueerkeji/article/details/106381763

版权

css 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

<html>
    <header>
        <title>css background 属性详解</title>
    </header>
    <style>
        .bg{
            width: 500px;
            height: 400px;
            /**
            backgound 的参数
                1.颜色（background-color）
                2.图片（background-image）
                3.重复（background-repeat） 
                        repeat:垂直和水平方向重复，默认值
                        repeat-x:水平方向重复
                        repeat-y：垂直方向重复
                        no-repeat:不重复
                        inherit(继承):background-repeat属性设置从父元素继承
                4.背景图片固定/滚动(background-attachment)
                        scroll:随着页面滚动（默认）
                        fixed:不滚动
                        local:背景图片会随着元素内容的滚动而滚动
                        initial（最初的）：保持最初的
                5.位置(background-position)
                        left top/left center
                        center
                        x% y% 
                        xpos xpos
                        inherit(继承)
            其余
                background-clip:背景绘制区域
                        border-box:背景绘制在方框内(默认值)
                        padding-box:背景绘制在衬距方框内
                        content-box:背景绘制在内容方框内
                background-origin（原点）:指定background-position属性应该是相对位置
                        border-box:背景图像边界框的相地位置
                        padding-box:背景图像填充框的相对位置
                        content-box:背景图像相对位置的内容框
                background-size:背景图象的大小
                        20px 20px
                        20% 20% 
                        cover 保持纵横比，缩放成指定区域最小大小
                        contain 保持纵横比，缩放成指定区域最大大小
            **/
            background: #00ff00 url('https://www.runoob.com/try/demo_source/smiley.gif') repeat fixed center;
            background-clip:border-box;
            padding:20px;
            border:30px solid red;
        }
    </style>
    <body>
        <div class="bg"></div>
    </body>
<html>

上晴下雪

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
css background 属性详解

<html> <header> <title>css background 属性详解</title> </header> <style> .bg{ width: 500px; height: 400px; /** backgound 的参数 1.颜色（ba
复制链接

扫一扫