怎么用HTML设置背景图片开始的位置

这篇文章主要介绍“怎么用HTML设置背景图片开始的位置”,在日常操作中,相信很多人在怎么用HTML设置背景图片开始的位置问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家解答”怎么用HTML设置背景图片开始的位置”的疑惑有所帮助!接下来,请跟着小编一起来学习吧!

background-orgin:数值值;

这里的属性值就是开始的位置,可分为:

padding-left(默认);content-box;border-box    <style>
        *{
            margin:0;
            padding;0;        }
        ul li{
            list-style: none;
            float:left;
            width: 200px;
            height: 200px;
            text-align:center;
            line-height:100px;
            border:10px dashed black;
            margin-left: 20px;
            background:url("image/mountain.jpg") no-repeat;
        }
        ul li:nth-child(2){
            background-origin: padding-box;/*背景图片默认从什么区域开始显示,默认就是从padding区域开始显示*/
        }
        ul li:nth-child(3){
            background-origin: border-box;
        }
        ul li:nth-child(4){
            background-origin: content-box;
        }...............省略代码............
<ul>
    <li>默认</li>
    <li>padding</li>
    <li>border</li>
    <li>content</li>

到此,关于“怎么用HTML设置背景图片开始的位置”的学习就结束了,希望能够解决大家的疑惑。理论与实践的搭配能更好的帮助大家学习,快去试试吧!若想继续学习更多相关知识,请继续关注网站,小编会继续努力为大家带来更多实用的文章!