11：图片起始位置

最新推荐文章于 2024-10-15 11:52:30 发布

原创最新推荐文章于 2024-10-15 11:52:30 发布 · 246 阅读

0 ·

CC 4.0 BY-SA版权

CSS3 专栏收录该内容

13 篇文章

订阅专栏

本文介绍了如何使用CSS的background-origin属性来控制背景图片的显示起始位置，包括border-box、padding-box及content-box三个选项，并提供了示例代码。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

***相应效果

***相关图片

***相关代码

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .div1 {
            border: 20px solid black;
            padding: 60px;
            background: url(images/img2.jpg) no-repeat;
            background-origin: content-box;
            background-clip: content-box;
        }

    </style>
</head>

<body>
    <div class="div1">
        设置元素背景图片的原始起始位置。background-origin ： border-box | padding-box | content-box; 参数分别表示背景图片是从边框，还是内边距（默认值），或者是内容区域开始显示。需要注意的是，如果背景不是no-repeat，这个属性无效，它会从边框开始显示。
    </div>
</body>

</html>