css008 add a picture to a webpage

css008 add a picture to a webpage

1. CSS and Labels

1, tag is the HTML to add a picture of the label, generally:

2. Add a picture to the CSS:?

3. CSS properties that are often used to process images:

A, Border (border): Each border can be set a different color style and width

B, padding (fill): Add space between the border and the picture, you can set various properties such as background color in the space

C, float (floating): You can float the picture to the left or right of the corresponding layout. You can float multiple pictures together.

Problem: A Word document's picture also has a setting that floats above the text, which does not occupy space, and usually the things around it are automatically at the bottom of the photo. The float here seems to occupy space, and the things around it will only be around it.

D, margin (margin): The distance between the picture and other page elements.

E, to add style to the picture, generally only some of the pictures to add style, so the general use of class style.

2. Add a background picture

1. Add a background image to the CSS:

Background-image:url (image address) no-repeat;

2, you can create a background image containing all the required background images (this may not be very good look)

body{Background-image:url (Images/bg.gif)}

A path can be a path relative to a document, or a path relative to the root directory

Now for documents: URL (.... /images/bg.gif)

Relative root directory: URL (/images/bg.gif)

3. Control Repetition

1, No-repeat

2, the question: can control what thing repeats, can control draw two line of border? What can be repeated and what cannot be repeated??

3. What are the benefits of repetition? What kind of effect can you get??

4. Background-repeat properties Specify how the picture should be tiled or uneven

The Background-repeat property accepts four values:

Repeat: Default setting, from left to right, tile up and down from top to bottom to fill the specified space

No-repeat: Only show pictures once, do not repeat any

Repeat-x: Tile along the x-axis, can be used to do things like banners

Repeat-y: Tile along the y-axis to add a shadow on either side of the page element

4. Position background Image

1, positioning background Image: Position:0 0; (followed by a value that is the relative position of the desired picture in the entire background picture)

2, positioning the background picture can bring what kind of convenience

3. You can set the starting point of the horizontal and vertical orientation of the picture in different ways: keyword precise value percentage

4, Background-position:left/right/center Left/right/center;

5, background-position:20px 20px;

6, background-position:50% 50%; (this 50% is relative to whom?? ）

7. The three values of this property can be mixed.

8. How to pin a Picture: Background-attacment property

This property can have two values: scroll (rolling) fixed (fixed)

body{Background-image:url (images/logo.gif);

Background-repeat:no-repeat;

background-attacment:fixed; }

9. Background-origin and Background-clip of the position background image

Adjust the beginning of the picture to limit the area of the background picture

Background-origin:border-box (picture shown in the upper left corner of the border area);

Padding-box (picture shown in the upper left corner of the padding area)

Cntent-box (image shown in the upper right corner of the content area)

Background-clip:border-box (background image shown in border area);

Padding-box (background image padding area)

Cntent-box (background image shown in content area)

10, zoom background image: background-size:100px 200px;

Can be set to: background-size:100px auto;

background-size:100% 100%;

11, Background-size:contain; forces the image to resize according to the corresponding element, maintaining the original aspect ratio to extend.

12, Background-size:cover; forces the image to resize according to the corresponding element, maintaining the original aspect ratio to shrink.

5. using background Shortcut properties

1, background can be followed by multiple values, what is it?

2, like the font properties of the shortcut to use, generally do not write like this, too messy. There are various properties of background such as Background-color and background in the order of CSS must be noted. will produce an overlay.

3, Background:url (.. /images/tell.png) No-repeat left; (In a background can write various information, such as color, background image, background image location, etc.)

6. use multiple background pictures

1, the use of multiple background images is to add the meaning of the picture, the image overlay to get a specific effect, or a specific shape combination??

2, multiple pictures imported, and set different repeating ways and different styles

7. use the gradient color background

1. How to use the gradient color? Which statements?

2. Linear gradient

Background-image:linear-gradient (left black white);

(the element starts at the left with Black to the right and ends with white.) Black and white are keywords that can be represented by a certain value or RGB (). The color inside can be added multiple)

3, Color Station: To determine the value of the percentage to control the position of color change

Background-image:linear-gradient (Left,black 20%, white 80%);

4. Repeat linear gradient

Background-image:repeating-linear-gradient (bottom left,black 20%, white 80%);

5. Radial Gradient

Background-image:radial-gradient (red blue);(oval gradient)

Background-image:radial-gradient (Circle Red Blue);(round gradient)

Radial Gradient Size: closest-side (extends from center to nearest edge of center)

Closest-corner (distance from center point to nearest element angle)

Farthest-side (for measuring radius, distance from center point to farthest edge of Element)

Farthest-corner (for measuring radius, distance from center point to farthest angle of Element)

6. Repeat Radial gradient

As with linear gradients, radial gradients can be set to repeat

8. easily create gradients with Colorzilla

1, what is this new thing??

css008 add a picture to a webpage