Css background style (background)
Click on the image material needs or contact me private letters, comments
CSS can add background colors and background images, as well as to carry out the picture settings.
| background-color | background color |
|---|---|
| background-image | Background image address |
| background-repeat | Whether tile |
| background-position | Background-position |
| background-attachment | Fixed or scrolling background |
| Co-wrote the background (composite attribute) | |
| background: the background color of the background picture address background tile background background scroll position |
Background image (image)
grammar:
background-image : none | url (url)
Parameters:
none: no background (the default)
URL: using the absolute or relative address of the specified background image
background-image property allows you to specify a picture to show in the background (it can only CSS3 multi-background) and can be used in conjunction with background-color. If the picture is not repeated in words, pictures can not cover the place will be filled with the background color. If you have a background image tiling, it will cover the background color.
Tip: We advocate the background behind the picture address, url without the quotation marks.
Background tile (repeat)
grammar:
background-repeat : repeat | no-repeat | repeat-x | repeat-y
parameter:
repeat: the background image tile in the longitudinal and transverse (default)
NO-repeat: the background image is not tiled
repeat-x: background image tile in the transverse
repeat-y: the background image tile vertically
When setting a background image, the default image to spread across the tile elements in the horizontal and vertical directions.
repeat-x: background image tile in the transverse
repeat-y: the background image tile vertically
When setting a background image, the default image to spread across the tile elements in the horizontal and vertical directions.
Background-position (position)
grammar:
background-position : length || length
background-position : position || position
parameter:
length: percentage | length value by the floating point numbers, and unit identifier. Please refer to the unit of length
position: Top | Center | bottom | left | Center | right
Description:
Set the background image or the position of the search object. You must specify the background-image property. The default value is: (0% 0%).
If you specify a value for the abscissa. Ordinate will default to 50%. Second value for the ordinate.
注意：
1. position 后面是x坐标和y坐标。 可以使用方位名词或者 精确单位。
2. 如果和精确单位和方位名字混合使用，则必须是x坐标在前，y坐标后面。比如background-position: 15px top; 则 15px 一定是 x坐标 top是 y坐标。
The actual work with most is the background image centered.
Background attachment
grammar:
background-attachment : scroll | fixed
Parameters:
the Scroll: background image is a scroll with the contents of the object
fixed: the background image is fixed
Description:
Set or retrieve the contents of the object with the background image is scrolled or fixed.
Background shorthand
writing order the official value of the property background and there is no mandatory standard. For readability, suggest that you write as follows:
background: The background color background picture tiled background address background scroll background-position
background: transparent url(image.jpg) repeat-y scroll 50% 0 ;
Transparent background (CSS3)
CSS3 support background translucent wording syntax is:
background: rgba(0,0,0,0.3);
The last parameter is between the alpha transparency ranges from 0 to 1
注意： 背景半透明是指盒子背景半透明， 盒子里面的内容不收影响。
Sample code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>背景样式</title>
<style>
body {
height:2000px;
}
.box1 {
width:2000px;
height:200px;
/* 设置背景颜色 */
background-color:#eeeeee;
/* 设置背景图片 */
background-image:url(img/sun.jpg);
/* 设置图片不平铺 */
background-repeat:no-repeat;
/* 设置背景图片的定位---右下角（x轴，y轴） */
background-position:80px 150px;
/* background-position:right bottom; */
/*background-position:100% 50%;*/
/* 设置背景图片垂直水平居中 */
/* background-position:50% 50%; */
/* background-position:center; */
/* 设置背景图片的是否滚动 */
height:2000px;
background-attachment:fixed;
}
.box2 {
width:800px;
height:500px;
background:#eeeeee url(img/sun.jpg) no-repeat fixed 20px 20px;
}
</style>
</head>
<body>
<div class="box1">千金美酒千人干</div>
<div class="box2">纵是一醉连城也寒酸</div>
</body>
</html>
Navigation Bar Case
Tips : In the box in the line, we set the row height to the height of the box, you can make the text vertically.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>导航栏案例</title>
<style>
.nav {
width:100%;
height:50px;
/* 只能让里面的行内元素和行内块级元素居中，对里面的盒子无效 */
text-align:center;
}
.nav a {
width:120px;
height:50px;
display:inline-block;
background-color:#abcdef;
border-radius:5px;
text-decoration:none;
color:white;
text-align:center;
line-height:50px;
margin:30px 5px;
}
a:hover{
background-color:#a1aeb1;
}
.box {
width:100px;
height:100px;
/* 让块级盒子水平居中于当前父容器 */
/* 上下为0，左右居中 */
margin:0 auto;
}
</style>
</head>
<body>
<div class="nav">
<a href="#">网站导航</a>
<a href="#">网站导航</a>
<a href="#">网站导航</a>
<a href="#">网站导航</a>
<a href="#">网站导航</a>
<a href="#">网站导航</a>
</div>
<div class="box"></div>
</body>
</html>