Background abbreviation attributes:
The background abbreviation attribute can set all the background attributes in one statement.
background: #00ff00 url('smiley.gif') no-repeat fixed center;
- The attributes that can be set are: background-color, background-position, background-size, background-repeat, background-origin, background-clip, background-attachment and background-image.
- The values are separated by spaces, in no particular order.
- There can be only some of these values, such as background: #FF0000 url(smiley.gif); is allowed.
1.background-color:
body
{
background-color:yellow;
}
h1
{
background-color:#00ff00;
}
p
{
background-color:rgb(255,0,255);
}
2.background-image
Background image: background-image:url('paper.gif');
attribute value: url (background address)
3.background-repeat
-
The tiling method of the background image, default: it will be full horizontally and vertically
-
Property value:
repeat-x repeat-y repeat (x,y都进行平铺) no-repeat(都不平铺)
4.background-position
- The location of the background image
- Attribute value: xy
(1) xpos ypos : when all positive values, move to the right and down
(2) Words can also be used (if only one keyword is specified, other values will be "center")
x:left center right
y:top center bottom
(3) Percentage: x% y% The first value is the horizontal position, and the second value is the vertical. The upper left corner is 0% 0%. The bottom right corner is 100% 100%. If only one value is specified, the other values will be 50%. . The default value is: 0% 0%
5.background-attachment
-
The way the background image moves with the scroll bar
-
Attribute value
fixed 固定，不随内容一块滚动； scroll:随内容一块滚动。
6.background-size
- Property value: background-size: 80px 60px; specify the image size
xy
(1) Set the height and width of the background image (10px 30px). The first value sets the width, and the second value sets the height. If only one value is given, the second one is set to auto;
(2) The percentage relative to the background positioning area (30% 30%) will be calculated . The first value sets the width, and the second value sets the height. If only one value is given, the second one is set to "auto"
(3) cover : At this time, the aspect ratio of the image will be maintained and the image will be scaled to the smallest size that will completely cover the background positioning area. The background image will not be deformed, but the excess area will be cut off.
(4) contain : At this time, the aspect ratio of the image will be maintained and the image will be scaled to the maximum size suitable for the background positioning area.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div{
width: 300px;
height: 300px;
border: 1px solid red;
background: url(../images/mn1.jpg) no-repeat;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
Modify background-size: 300px 300px;
Review: background-size: 100% 100%;
Review: background-size: cover;were laid off
modify:background-size:contain ;
7.background-origin
-
Specifies the position relative to the background-position property. Set the starting point of the background image
如果背景图像的 background-attachment 属性为 "fixed"，则该属性没有效果。 -
Attribute value: background-origin: padding-box (default)|border-box|content-box;
padding-box: start from the inner margin, the default value
border-box: start from the border
content-box: start from the content area
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
<style>
div {
border: 10px dashed black;
padding: 35px;
background-image: url(../images/app4.png);
background-repeat: no-repeat;
background-position: left;
}
#div1 {
background-origin: border-box;
/* 从边框开始摆放*/
}
#div2 {
background-origin: content-box;
/* 从content开始摆放*/
}
#div3 {
background-origin: padding-box;
/* 从内边距开始摆放，为默认值*/
}
</style>
</head>
<body>
<p>背景图像边界框的相对位置：</p>
<div id="div1">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet
dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper
suscipit lobortis nisl ut aliquip ex ea commodo consequat.
</div>
<p>背景图像的相对位置的内容框：</p>
<div id="div2">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet
dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper
suscipit lobortis nisl ut aliquip ex ea commodo consequat.
</div>
<p>背景图像的padding的内容框：</p>
<div id="div3">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet
dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper
suscipit lobortis nisl ut aliquip ex ea commodo consequat.
</div>
</body>
</html>
8.background-clip attributes:
-
background-clip: Specify the background drawing area.
-
Property value:
border-box 默认值。背景绘制在边框方框内（剪切成边框方框）。 padding-box 背景绘制在衬距方框内（剪切成衬距方框，超出padding就裁剪掉）。 content-box 背景绘制在内容方框内（剪切成内容方框,超出内容就裁剪）。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
<style>
div {
border: 10px dotted black;
padding: 35px;
background: yellow;
}
#example1 {
background-clip: border-box;
/* 默认值 */
}
#example2 {
background-clip: padding-box;
}
#example3 {
background-clip: content-box;
}
</style>
</head>
<body>
<p>没有背景剪裁 (border-box没有定义):</p>
<div id="example1">
<h2>Lorem Ipsum Dolor</h2>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet
dolore magna aliquam erat volutpat.</p>
</div>
<p>background-clip: padding-box:</p>
<div id="example2">
<h2>Lorem Ipsum Dolor</h2>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet
dolore magna aliquam erat volutpat.</p>
</div>
<p>background-clip: content-box:</p>
<div id="example3">
<h2>Lorem Ipsum Dolor</h2>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet
dolore magna aliquam erat volutpat.</p>
</div>
</body>
</html>
