This is the 30th day of my participation in the More Text Challenge. For more details, see more text Challenge

background

background-color

Background color. In addition to the three color value representations you learned earlier, you can also use rgba() transparency

background-color: rgba(255.0.0.5);
Copy the code

background-image

Background images. (Cannot open the size of the box)

Url: relative absolute path.

When the background image is smaller than the box size, the box is covered by default.

background-image: url(images/in_12.png);
Copy the code

Background rendering area: Within the border, the padding can render the background.

The background image is rendered over the background color.

background-image: url(images/in_12.png);
background-color: green;
Copy the code

background-repeat

Setting background repetition

Default value: repeat

Non-repeat :(only render the background once) no-repeat

Repeat in the horizontal direction: repeat-x;

Repeat in the vertical direction: repeat-y

background-position

Background position: The position of the background image within the overall background (which can render the background area).

  • Pixel representation: horizontal offset vertical offset
background-position: 100px 40px;
Copy the code

The first parameter: 100px indicates that the upper left corner of the background image is offset to the right by 100px(positive) relative to the upper left corner of the larger background image.

The second parameter: 40px indicates that the upper left corner of the background is offset down 40px (positive direction) from the upper left corner of the larger background.

The elves figure

CSS Sprite

There are many small images in the web page, each image will initiate an HTTP request, we usually integrate these small images into a picture, only need to send one HTTP request, improve the page loading speed.

Sprite map making:

1The Sprite image must be saved in PNG format.2Sprite as small as possible3Sprite, as close as possible, to the leftCopy the code

Sprites use:

1 Limit the box width and height

2 Use background-position to access any pixies

.box2 {
	/*1 Limit box size */
	width: 97px;
	height: 68px;
	border: 1px solid # 000;
	margin: 50px 0px;
	background-image: url(images/9.jpg);
	background-position: -211px -27px;
}
Copy the code

Diy:

div {
	/* Limit the box width and height */
	width: 103px;
	height: 134px;
	float: left;
	margin-right: 5px;
	background-image: url(images/zimu.jpg);
	/* Pass background-position to any Sprite */
	background-position: -403px -17px;
}
.i {
	/* Special properties are followed by cascading */
	width: 78px;
	height: 127px;
	background-position: -156px -189px;
}
.y {
	width: 101px;
	height: 125px;
	background-position: -477px -530px;
}
Copy the code

  • Word representation

Horizontal: left right center

Vertical: Top bottom center

background-position: center center;
Copy the code

Application:

The background is centered

background-image: url(images/anhei.jpg);
Copy the code

The banner is centered

.banner {
	/* Div block-level elements with no set width automatically fill the parent box */
	width: 100%;
	height: 500px;
	background-color: lightblue;
	background-image: url(images/banner.jpg);
	background-position: center top;
}
Copy the code
  • Percentage notation

In the middle:

background-position: 50% 50%;
Copy the code

background-attachment

Scroll or not (only in body)

Default: Scroll (the background image will scroll as the page rolls)

The background image does not scroll as the page scrolls

background-attachment: fixed;
Copy the code

Background is a compound property and you can write it compound. Use Spaces for each attribute value

Property values can be written all or omitted to indicate that default values are used. (Background-position must be written horizontally before vertical)

application

  • Text replacement picture

The logo is rendered h1, and the logo is usually displayed with pictures. For SEO, the text is replaced with the picture.

.header .inner .logo {
	float: left;
	width: 157px;
	height: 35px;
	/* Overflow a text to hide */
	overflow: hidden;
}
.header .inner .logo a {
	/* The width and height of an element in a row cannot be set
	display: block;
	height: 35px;
	background: url(images/logo2.png) no-repeat;
	/* Text is for the crawler to see, not for the user to see */
	text-indent: -999em;
}
Copy the code

Use the padding to squeeze out the small background area.

An unordered list usually has a lead, and we use padding to extricate the lead

.box ul li {
	height: 50px;
	line-height: 50px;
	font-size: 20px;
}
.box ul li a {
	display: block;
	height: 50px;
	line-height: 50px;
	padding-left: 30px;
	/* Background-position words and pixels can be combined with */
	background: url(images/s2.png) no-repeat 5px center;
}
.box ul li a:hover {
	color: orange;
}
Copy the code

positioning

Positioning the position:

Attribute values:

A. relative B. absolute C. fixed D. fixedCopy the code

Relative positioning

position: relative;
Copy the code

Horizontal: left right

Vertical: top bottom (horizontal and vertical)

.no2 {
	/* Relative positioning */
        position: relative;
	left: 250px;
	top: 40px;
	background-color: orange;
}
Copy the code

Relative positioning:

The relative positioning of elements does not leave the standard document flow, the original location is retained

2. Offset the new position relative to the original position (shadow separation)

Positive meaning

left: 40pxThe new position is shifted to the right40px
top: 40pxIndicates that the new position is offset downward40px
right: 40pxThe new position is shifted to the left40px
bottom: 40pxIndicates that the new position is shifted upward40px
Copy the code

You can also write a negative number: the opposite of a positive number

left: -40pxThe new position is shifted to the left40px
top: -40pxIndicates that the new position is shifted upward40px
right: -40pxThe new position is shifted to the right40px
bottom: -40pxIndicates that the new position is offset downward40px
Copy the code
.no3 {
	position: relative; Shift to the right100px
	right: -100px; Upward migration50px
	top: -50px;
	background-color: orange; }.no3 {
	position: relative;
	left: 100px;
	bottom: 50px;
	background-color: orange;
}
Copy the code

Absolute positioning

position: absolute;
Copy the code

There are also four directional offsets, the same usage

.no2 {
	/* Absolute positioning */
	position: absolute;
	left: 250px;
	top: 40px;
	background-color: orange;
}
Copy the code

When an absolutely located element deviates from the standard document stream, there are two cases of relative deviation.

Locating references that do not target ancestral elements

Not targeting the ancestor element (there may be no ancestor, or the ancestor may not be located)

Have top participate in the offset relative to the upper left/upper right corner of the page

.no2 {
	/* Absolute positioning */
	position: absolute;
	right: 250px;
	top: 40px;
	background-color: orange;
}
Copy the code

There is a bottom in the bottom left/right corner of the first screen

.no4 {
	/* There is a bottom involved in the first screen */
	position: absolute;
	/*left: 250px; * /
	right: 250px;
	bottom: 40px;
	background-color: red;
}
Copy the code

Locate references for ancestral elements

Reference element: The closest (HTML structure) ancestor element with location.

<divClass ="box1">divClass ="box2">p< / > boxp</ > </ > </ > </ > </ > </ > </div>
</div>
Copy the code