17th Chapter CSS Border and background (bottom)

Last Update:2016-09-09 Source: Internet

Author: User

Tags transparent color set background

Developer on Alibaba Coud: Build your first app with APIs, SDKs, and tutorials on the Alibaba Cloud. Read more ＞

17th Chapter CSS Border and background [bottom]
Learning Essentials:
1. Setting the background

This chapter focuses on CSS borders and backgrounds in HTML5, and adds to elements by styling the borders and backgrounds
A richer look.
A Set background
The size of the box model can be achieved in two ways, one is the previous border, and the other is the background.
The style sheet for CSS background settings is as follows:

Property Value Description CSS version
Background-color Color background colors 1
Background-image None or URL background picture 1/3
Background-repeat style name background picture Style 1/3
Background-size length value or other background image size 3
Background-position position coordinates background image position 1
Background-attachment scrolling mode background picture scrolling 1/3
Background-clip clipping mode background image clipping 3
Background-origin position coordinates background picture starting point 3
Background compound value background picture shorthand Method 1

1.background-color
Value Description CSS Version
Color set background color to specified color 1
Transparent setting the background color to transparent color 1

div {
Background-color:silver;
}
Explanation: Sets the background color of the element. The property value is a color value.

Div B {
Background-color:transparent;
}
Explanation: The default value is transparent, which means transparent. This will inherit the elements of the <div> interior <div>
Background color. In general, this property is used very often, because it is not necessary to change the color when the default, you need to change the color
Color is also a value.
Body {
Background-color:silver;
}
Explanation: You can set the background color of the entire page under the <body> element.
2.background-image
Value Description CSS Version
None cancel setting of background picture 1
URL set background image via URL 1

Body {
Background-image:url (loading.gif);
}
Explanation: The URL is the path of the picture, set the entire page to this picture as the background, if the picture is not enough to cover,
Copy the extension.
div {
Background-image:none;
}
Explanation: If multiple div sets the background in bulk and one of them does not need a background, you can set none individually
Value cancels the background.
In the CSS3, the background image is also set up such as linear, radioactive and other gradient methods. However, due to the problem of the degree of support,
For example, IE9 has not been supported. We put these new features in a separate course to explain.
3.background-repeat
Value Description CSS Version
Repeat-x Tile Image Horizontally 1
Repeat-y Tile Image Vertically 1
Repeat tile the image horizontally and vertically 1
No-repeat tile images are forbidden 1

Body {
Background-image:url (loading.gif);
Background-repeat:no-repeat;
}
Explanation: Let the background picture Show only one, uneven shop. The CSS3 also provides two values that, due to poor support,
Ignored.
4.background-position
Value Description CSS Version
Top position the background image to the top of the element 1
Left position the background image to element 1
Right to position the background image to the left of the element 1
Bottom position the background image at the bottom of the element 1
Center positions the background image in the middle of the element 1
Length values offset the position of the picture using the length value 1
Percentage use percent offset picture position 1

Body {
Background-image:url (loading.gif);
Background-repeat:no-repeat;
Background-position:top;
}
Explanation: Place the background picture above the page and if you want to put it at the top left, the value is: Top.
Body {
Background-image:url (loading.gif);
Background-repeat:no-repeat;
background-position:20px 20px;
}
Explanation: Using a length value or a percentage, the first value represents the left, and the second value represents the top.
5.background-size
Value Description CSS Version
Auto default, image shown in this size 3
Cover scale The image so that the image covers at least the container, but it may exceed the container 3
Contain scales the image so that the larger of its width, height is coincident with the container horizontally or vertically 3
Length value CSS length value, such as PX, EM3
Percentages such as: 100%3

Body {
Background-image:url (loading.gif);
Background-size:cover;
}
Explanation: Using cover equivalent to 100%, full-screen paving a large picture, this value is very practical. In equal proportion to enlarge
In the process of narrowing, there may be a background beyond that, of course, this is harmless.
div {
Background-image:url (loading.gif);
Background-size:contain;
}
Explanation: Use contain to show the picture as full as possible within the element.
Body {
Background-image:url (loading.gif);
background-size:240px 240px;
}
Explanation: The use of length values, respectively, indicates length and height.
6.background-attachment
Value Description CSS Version
Scroll default value, the background is pinned on the element and does not scroll along with the content 1
Fixed background on windows, content scrolling background not moving 1

Body {
Background-image:url (loading.gif);
background-attachment:fixed;
}
Explanation: The fixed property causes a watermark effect on the background, dragging the scroll bar and moving the background.
7.background-origin
Value Description CSS Version
Border-box drawing a background inside an element box 3
Padding-box drawing background inside the inner margin box 3
Content-box drawing a background inside a content box 3

div {
width:400px;
height:300px;
border:10px dashed red;
padding:50px;
Background-image:url (img.png);
Background-repeat:no-repeat;
Background-origin:content-box;
}
Explanation: Sets the starting position of the background.
8.background-clip
Value Description CSS Version
Border-box cropping the background inside the element box 3
Padding-box inside margin Box trim background 3
Content-box cutting background within content sunspots 3

div {
width:400px;
height:300px;
border:10px dashed red;
padding:50px;
Background-image:url (img.png);
Background-repeat:no-repeat;
Background-origin:border-box;
Background-clip:padding-box;
}
Explanation: Crop the background inside the inner margin box.
9.background
div {
width:400px;
height:300px;
border:10px dashed red;
padding:50px;
Background:silver URL (img.png) no-repeat Scroll left top/100%
Border-box Content-box;
}
Explanation: The complete shorthand sequence is as follows:
[Background-color]
[Background-image]

Example

<! DOCTYPE html>
<meta charset= "Utf-8" >
<TITLE>CSS border and background [bottom]</title>
<link rel= "stylesheet" type= "Text/css" href= "Style.css" >
<body>

<!--<div> I am <b>html5</b>, I am <b>html5</b>, I am <b>html5</b>,</div >

<div> I am <b>html5</b> I am <b>html5</b> I am <b>HTML5</b>,</div>--

</body>

@charset "Utf-8";

/*html {
height:100%;
}*/

Body {
/*background-color:silver;*/
/*background-image:url (loading.gif); * *
/*background-image:none;*/
/*background-repeat:repeat-x;*/
/*background-repeat:repeat-y;*/
/*background-repeat:repeat;*/
/*background-repeat:no-repeat;*/

/*background-position:top;*/
/*background-position:right;*/
/*background-position:left;*/
/*background-position:bottom;*/
/*background-position:center;*/
/*background-position:right top;*/
/*background-position:left bottom;*/

/*background-size:cover;*/
/*background-size:200px 200px;*/
/*background-size:100%;*/

/*background-attachment:scroll;*/
/*background-attachment:fixed;*/
}

div {
width:500px;
height:300px;
/*background-color:silver;
Background-image:url (img.png);
Background-repeat:no-repeat;
background-position:bottom;*/

border:10px dashed red;
padding:50px;

/*background-image:url (loading.gif); * *
/*background-image:url (img.png); * *
/*background-size:cover;*/
/*background-size:contain;*/

/*background-repeat:no-repeat;

background-origin:border-box*/;
/*background-origin:padding-box;*/
/*background-origin:content-box;*/

/*background-clip:border-box;*/
/*background-clip:padding-box;*/
/*background-clip:content-box;*/

Background:silver URL (img.png) no-repeat top left/100% border-box content-box;
}

/*div B {
background-color:red;
}

Div B:first-child {
Background-color:transparent;
}*/

17th Chapter CSS Border and background (bottom)

This article is an English version of an article which is originally in the Chinese language on aliyun.com and is provided for information purposes only. This website makes no representation or warranty of any kind, either expressed or implied, as to the accuracy, completeness ownership or reliability of the article or any translations thereof. If you have any concerns or complaints relating to the article, please send an email, providing a detailed description of the concern or complaint, to info-contact@alibabacloud.com. A staff member will contact you within 5 working days. Once verified, infringing content will be removed immediately.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

24/7 Technical Support 6 Free Tickets per Quarter Faster Response

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More