css3 background
The css background mainly includes five attributes:
background-color
background-color:transparent || <color>
Used to set the background color of the element, the default value is transparent( Transparent), the color can be specified by color name, RGB color, hls value, and hexadecimal value.
background-image
background-image:none || <url>
Used to set the background image of the element. The default value is none. You can use relative addresses or absolute addresses.
background-repeat
background-repeat:repeat || repeat-x || repeat-y || no-repeat
Used to set the laying method of the element background image in the element box model. The default value is repeat, which tiles in the X-axis and Y-axis directions at the same time. repeat-x only tiles in the x-axis direction, repeat-y only tiles in the y-axis direction, and no-repeat does not tile.
background-attachment
background-attachment:scroll || fixed
Used to set whether the element background image is fixed. The default value is scroll, which is not fixed. fixed, fixed.
background-position
background-position:<percentage> || <length> || [left | center | right] [,top | center | bottom]
Used to set the position of the background image of the element. The default value is (0,0) || (0%,0%) || (left top) ,The value can be a specific percentage or numerical value, or ,keywords can be used.
In CSS3, 4 new attributes have been added.
background-origin
The background-origin attribute is mainly used to determine the reference origin of the background-position attribute, that is, to determine the starting point for positioning the background image.
background-origin:padding-box || border-box || content-box
In older versions of browsers, the attribute values are padding, border, and content.
Padding-box (padding): Default value, determines the starting position of background-position to display the background image from the outer edge of padding.
Border-box (border): Determine the starting position of background-position to display the background image from the outer edge of the border.
Content-box(content): Determines the actual position of background-position to display the background image starting from the outer edge of content.
<!DOCTYPE html><html lang="en" xmlns="http://www.w3.org/1999/xhtml"><head><meta charset="utf-8" /><title></title><style> div{ width: 100px; height: 100px; border:10px dashed; padding:10px; background:url(https://img.alicdn.com/imgextra/i4/2406102577/TB2t7IWdFXXXXaqXpXXXXXXXXXX_!!2406102577.jpg) no-repeat scroll 0 0; background-origin:padding-box; }</style></head><body> <div></div></body></html> By default, the image starts from the upper left corner of the box padding and reaches the lower right corner of the outer edge of the border.
div{ width: 100px; height: 100px; border:10px dashed; padding:10px; background:url(https://img.alicdn.com/imgextra/i4/2406102577/TB2t7IWdFXXXXaqXpXXXXXXXXXX_!!2406102577.jpg) no-repeat scroll 0 0; background-origin:border-box;} When the value is border-box, the image starts from the upper left corner of the border of the box and reaches the lower right corner of the border.
div{ width: 100px; height: 100px; border:10px dashed; padding:10px; background:url(https://img.alicdn.com/imgextra/i4/2406102577/TB2t7IWdFXXXXaqXpXXXXXXXXXX_!!2406102577.jpg) no-repeat scroll 0 0; background-origin:content-box;} When the value is content-box, the image starts from the upper left corner of the content of the box and ends at the lower right corner of the border.
Note: When background-attachment is fixed, background-origin will be invalid.
background-clip
It is mainly used to define the clipping area of the background image. The attribute value is similar to background-origin.
background-clip:border-box || padding-box || content-box
The old version attribute values are border and padding.
Border-box: Default value, the element background image is clipped outward from the element's border area.
Padding-box: The element background image is clipped outward from the padding area.
Content-box: The element background image is cut outward from the content area.
<!DOCTYPE html><html lang="en" xmlns="http://www.w3.org/1999/xhtml"><head><meta charset="utf-8" /><title></title><style> div{ width: 100px; height: 100px; border:10px dashed; padding:10px; background:url(https://img.alicdn.com/imgextra/i4/2406102577/TB2t7IWdFXXXXaqXpXXXXXXXXXX_!!2406102577.jpg) no-repeat scroll 0 0; background-origin:border-box; background-clip:border-box; }</style></head><body> <div></div></body></html> Border-box is the default value, automatically cutting images outside the border.
div{ width: 100px; height: 100px; border:10px dashed; padding:10px; background:url(https://img.alicdn.com/imgextra/i4/2406102577/TB2t7IWdFXXXXaqXpXXXXXXXXXX_!!2406102577.jpg) no-repeat scroll 0 0; background-origin:border-box; background-clip:padding-box;} When the value is padding-box, the area outside the padding is cut off.
div{ width: 100px; height: 100px; border:10px dashed; padding:10px; background:url(https://img.alicdn.com/imgextra/i4/2406102577/TB2t7IWdFXXXXaqXpXXXXXXXXXX_!!2406102577.jpg) no-repeat scroll 0 0; background-origin:border-box; background-clip:content-box;} When the value is content-box, the area outside the content is cut off.
background-size
It is mainly used to specify the size of the background image.
background-size:auto || <length> || <perentage> || cover || contain
auto: Default value, the original height and width of the background image will be maintained.
Cover: Enlarge the background image to fit the entire container. But it will cause the background image to be distorted.
Contain: Maintain the width-to-height ratio of the background image itself, and scale the background image to an area where the width or height fits the defined background.
When taking the value, you can set two or one. When taking one value, the width of the background image is specified, and the second value is equivalent to auto, which is the height. In this case, the height of the background image can be automatically scaled proportionally.
<!DOCTYPE html><html lang="en" xmlns="http://www.w3.org/1999/xhtml"><head><meta charset="utf-8" /><title></title><style> div{ width: 300px; height: 200px; border:10px dashed; padding:10px; background:url(https://img.alicdn.com/imgextra/i4/2406102577/TB2t7IWdFXXXXaqXpXXXXXXXXXX_!!2406102577.jpg) no-repeat scroll 0 0; background-size:auto; }</style></head><body> <div></div></body></html> Auto is the default value, keeping the background image size ratio.
div{ width: 300px; height: 200px; border:10px dashed; padding:10px; background:url(https://img.alicdn.com/imgextra/i4/2406102577/TB2t7IWdFXXXXaqXpXXXXXXXXXX_!!2406102577.jpg) no-repeat scroll 0 0; background-size:250px 200px;} Specify the width and height to change the size of the background image.
div{ width: 300px; height: 200px; border:10px dashed; padding:10px; background:url(https://img.alicdn.com/imgextra/i4/2406102577/TB2t7IWdFXXXXaqXpXXXXXXXXXX_!!2406102577.jpg) no-repeat scroll 0 0; background-size:50% 50%;} When specifying a percentage, the value will be based on the width and height of the box. In the above example, the width and height of the box are 300px
div{ width: 300px; height: 200px; border:10px dashed; padding:10px; background:url(https://img.alicdn.com/imgextra/i4/2406102577/TB2t7IWdFXXXXaqXpXXXXXXXXXX_!!2406102577.jpg) no-repeat scroll 0 0; background-size:cover;} When the value is cover, the background image is enlarged to fill the entire box.
div{ width: 300px; height: 200px; border:10px dashed; padding:10px; background:url(https://img.alicdn.com/imgextra/i4/2406102577/TB2t7IWdFXXXXaqXpXXXXXXXXXX_!!2406102577.jpg) no-repeat scroll 0 0; background-size:contain;} When the value is contain, the background image will be enlarged proportionally until the width or height touches the box.
多背景属性
在css3之前，每个容器只能指定一张背景图片，因此每当需要增加一张背景图片时，必须增加一个容器来容纳它。早期使用嵌套div容器显示特定背景的做法不是很复杂，但是它明显难以管理。它让html标记更加复杂，同时也会增加页面文件大小。如果要增加某个图片效果，不仅需要修改css还需要修改html代码。
通过css3的多背景属性，html标记就不需要任何修改，在css的background-image或则background属性中列出需要使用的所有背景图片，用逗号隔开。而且每张图片都具有background中的属性，例如可以重复，改变大小等。
background:[background-image] | [background-position][/background-size] | [background-repeat] | [background-attachment] | [background-clip] | [background-origin] ,*
也可以把缩写拆为以下形式。
background-image:url1,url2,...,urlN;background-repeat:repeat1,repeat2,...,repeatN;background-position:position1,position2,...,positionN;background-size:size1,size2,...,sizeN;background-attachment:attachment1,attachment2,...,attachmentN;background-clip:clip1,clip2,...,clipN;background-origin:origin1,origin2,...,originN;background-color:color;
除了backgroun-color之外，其他的属性都可以设置多个属性值，不过前提是元素有多个背景图片存在。多个属性值之间必须使用逗号隔开。
<!DOCTYPE html><html lang="en" xmlns="http://www.w3.org/1999/xhtml"><head><meta charset="utf-8" /><title></title><style> div{ width: 300px; height: 200px; border:10px dashed; padding:10px; background:url(https://img.alicdn.com/imgextra/i4/2406102577/TB2t7IWdFXXXXaqXpXXXXXXXXXX_!!2406102577.jpg) no-repeat scroll left top / 50% 50%, url(https://img.alicdn.com/imgextra/i4/2406102577/TB2HT.RdFXXXXclXpXXXXXXXXXX_!!2406102577.jpg) no-repeat scroll right top / 50% 50%, url(https://img.alicdn.com/imgextra/i4/2406102577/TB2TxlhdVXXXXXxXXXXXXXXXXXX_!!2406102577.jpg) no-repeat scroll right bottom / 50% 50%, url(https://img.alicdn.com/imgextra/i3/2406102577/TB2orQSdFXXXXb_XpXXXXXXXXXX_!!2406102577.jpg) no-repeat scroll left bottom / 50% 50%; background-color:#ff0000; }</style></head><body> <div></div></body></html> background-color属性只能有一个，切记，切记。
css3背景完。
Difficulty in updating caching of official account web pages: How to avoid the old cache affecting the user experience after version update?Mar 04, 2025 pm 12:32 PMThe official account web page update cache, this thing is simple and simple, and it is complicated enough to drink a pot of it. You worked hard to update the official account article, but the user still opened the old version. Who can bear the taste? In this article, let’s take a look at the twists and turns behind this and how to solve this problem gracefully. After reading it, you can easily deal with various caching problems, allowing your users to always experience the freshest content. Let’s talk about the basics first. To put it bluntly, in order to improve access speed, the browser or server stores some static resources (such as pictures, CSS, JS) or page content. Next time you access it, you can directly retrieve it from the cache without having to download it again, and it is naturally fast. But this thing is also a double-edged sword. The new version is online,
How do I use HTML5 form validation attributes to validate user input?Mar 17, 2025 pm 12:27 PMThe article discusses using HTML5 form validation attributes like required, pattern, min, max, and length limits to validate user input directly in the browser.
What are the best practices for cross-browser compatibility in HTML5?Mar 17, 2025 pm 12:20 PMArticle discusses best practices for ensuring HTML5 cross-browser compatibility, focusing on feature detection, progressive enhancement, and testing methods.
How to efficiently add stroke effects to PNG images on web pages?Mar 04, 2025 pm 02:39 PMThis article demonstrates efficient PNG border addition to webpages using CSS. It argues that CSS offers superior performance compared to JavaScript or libraries, detailing how to adjust border width, style, and color for subtle or prominent effect
What is the purpose of the <datalist> element?Mar 21, 2025 pm 12:33 PMThe article discusses the HTML <datalist> element, which enhances forms by providing autocomplete suggestions, improving user experience and reducing errors.Character count: 159
What is the purpose of the <progress> element?Mar 21, 2025 pm 12:34 PMThe article discusses the HTML <progress> element, its purpose, styling, and differences from the <meter> element. The main focus is on using <progress> for task completion and <meter> for stati
How do I use the HTML5 <time> element to represent dates and times semantically?Mar 12, 2025 pm 04:05 PMThis article explains the HTML5 <time> element for semantic date/time representation. It emphasizes the importance of the datetime attribute for machine readability (ISO 8601 format) alongside human-readable text, boosting accessibilit
What is the purpose of the <meter> element?Mar 21, 2025 pm 12:35 PMThe article discusses the HTML <meter> element, used for displaying scalar or fractional values within a range, and its common applications in web development. It differentiates <meter> from <progress> and ex
Hot AI Tools
Undresser.AI Undress
AI-powered app for creating realistic nude photos
AI Clothes Remover
Online AI tool for removing clothes from photos.
Undress AI Tool
Undress images for free
Clothoff.io
AI clothes remover
AI Hentai Generator
Generate AI Hentai for free.
Hot Article
Hot Tools
PhpStorm Mac version
The latest (2018.2.1) professional PHP integrated development tool
SublimeText3 Mac version
God-level code editing software (SublimeText3)
mPDF
mPDF is a PHP library that can generate PDF files from UTF-8 encoded HTML. The original author, Ian Back, wrote mPDF to output PDF files "on the fly" from his website and handle different languages. It is slower than original scripts like HTML2FPDF and produces larger files when using Unicode fonts, but supports CSS styles etc. and has a lot of enhancements. Supports almost all languages, including RTL (Arabic and Hebrew) and CJK (Chinese, Japanese and Korean). Supports nested block-level elements (such as P, DIV),
Notepad++7.3.1
Easy-to-use and free code editor
Safe Exam Browser
Safe Exam Browser is a secure browser environment for taking online exams securely. This software turns any computer into a secure workstation. It controls access to any utility and prevents students from using unauthorized resources.
