有background一系列的缩写吗?

有background一系列的缩写吗?

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title>background-origin</title>

        <style>

            div{width:300px;

                height:100px;

                border:10px solid blue;

                background:url(http://img1.sycdn.imooc.com/climg//582c342b0001fd6507000210.jpg) no-repeat;

                background-origin:padding-box;

                background-size:300px 100px;

            }

            div:hover{background:url(http://img1.sycdn.imooc.com/climg//582c34220001091605000150.jpg) no-repeat;

            background-size:300px 100px;

            background-position:10px 10px;

            background-origin:content-box;

            

        </style>

    </head>

    <body>

        <div></div>

    </body>

</html>

请检查代码,另外有缩写吗?里面关于background的内容有点多

正在回答

登陆购买课程后可参与讨论,去登陆

1回答

同学你好,如下所示位置缺少结束的括号,建议添加上,让代码更加规范

http://img1.sycdn.imooc.com//climg/5e9a66a20960ee6f17840422.jpg

没有缩写,不过可以直接使用复合属性background属性设置背景相关的样式,省略一些属性名的书写。复合属性书写顺序如下:

background:bg-color bg-image position/bg-size bg-repeat bg-origin bg-clip bg-attachment initial|inherit;

代码效果实现的很棒!

如果我的回答帮助到了你,欢迎采纳,祝学习愉快~

问题已解决,确定采纳
还有疑问,暂不采纳

恭喜解决一个难题,获得1积分~

来为老师/同学的回答评分吧

0 星
请稍等 ...
微信客服

购课补贴
联系客服咨询优惠详情

帮助反馈 APP下载

慕课网APP
您的移动学习伙伴

公众号

扫描二维码
关注慕课网微信公众号

在线咨询

领取优惠

免费试听

领取大纲

扫描二维码,添加
你的专属老师