cssbackground-origin的简单介绍

# CSS background-origin

CSS `background-origin` property specifies the positioning area for the background image of an element. By default, the background image is positioned relative to the padding box of the element, but `background-origin` allows you to change this behavior and position the background relative to the border box or content box instead.

## Syntax

```css

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

```

## Property Values

- **padding-box**: Default value. The background is positioned relative to the padding box of the element.

- **border-box**: The background is positioned relative to the border box of the element.

- **content-box**: The background is positioned relative to the content box of the element.

## Example

```css

div {

width: 200px;

height: 100px;

padding: 20px;

border: 5px solid black;

background-image: url('example.jpg');

background-repeat: no-repeat;

background-origin: padding-box;

```

In this example, the background image of the `div` element will be positioned relative to the padding box, as specified by `background-origin`.

## Browser Support

The `background-origin` property is supported in all major browsers, including Chrome, Firefox, Safari, and Edge.

Overall, `background-origin` is a useful CSS property for controlling the positioning of background images and can be used to achieve different design effects on web pages.