CSS3 background-origin 属性

最新推荐文章于 2024-02-19 11:13:45 发布

407指导员

最新推荐文章于 2024-02-19 11:13:45 发布

阅读量269

点赞数 1

分类专栏： CSS3 文章标签： css3

本文链接：https://blog.csdn.net/LIUCHUANQI12345/article/details/110597893

版权

CSS3 专栏收录该内容

77 篇文章 0 订阅

订阅专栏

CSS3 background-origin 属性

background-origin 属性规定背景图片从何处开始定位

语法

background-origin: padding-box|border-box|content-box;

值	描述
padding-box	背景图像相对于内边距框来定位。
border-box	背景图像相对于边框盒来定位。
content-box	背景图像相对于内容框来定位。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>新增背景属性</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        ul li {
            list-style: none;
            float: left;
            width: 100px;
            height: 100px;
            text-align: center;
            line-height: 100px;
            border: 20px dashed #000;
            padding: 50px;
            margin-left: 20px;
            background: url("images/dog.jpg") no-repeat;
        }

        ul li:nth-child(2) {
            /*告诉背景图片从什么区域开始显示，
            默认情况下从padding开始显示*/
            background-origin: padding-box;
        }
        ul li:nth-child(3) {
            /*告诉背景图片从什么区域开始显示，
            默认情况下从padding开始显示*/
            background-origin: border-box;
        }
        ul li:nth-child(4) {
            /*告诉背景图片从什么区域开始显示，
            默认情况下从padding开始显示*/
            background-origin: content-box;
        }
    </style>
</head>
<body>
<ul>
    <li>默认</li>
    <li>padding</li>
    <li>border</li>
    <li>content</li>
</ul>
</body>
</html>

在这里插入图片描述

407指导员

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS3 background-origin 属性

CSS3 background-origin 属性background-origin 属性规定 background-position 属性相对于什么位置来定位。语法background-origin: padding-box|border-box|content-box;值描述padding-box背景图像相对于内边距框来定位。border-box背景图像相对于边框盒来定位。content-box背景图像相对于内容框来定位。<!DOCTYPE h
复制链接

扫一扫