CSS background and sprite

First, the background color:

1. How to set the background color of the label?

A backgroud-color attribute in CSS is designed to set the background color of the label

Value:

Specific words:

rgb

rgba

Hex

2. syntax:

Second, the background image

1. How to set the background image:

It has called backgroud-image in CSS: url (); attribute is specifically used to set the background image.

important point:

1. Pictures of address must be placed url (), the picture of address can be a local address, or the address of the network.

2. If the size of the picture did not tag the size of a large, tiled and it will automatically fill in horizontal and vertical directions.

3. If there is a picture on the page, the browser sends a request again get the picture.

To reach the page:

3. Background Tile (master)

1. How to control the tiled background image?

There are a backgroud-repeat property in CSS is designed for tiled background image of control.

(1) Value ways:

backgroud-repeat: repeat default, are required in the horizontal and vertical tile

backgroud-repeat: no-repeat horizontally and vertically tiles do not need

backgroud-repeat: repeat-x in the horizontal direction only tiled

backgroud-repeat: repeat-y in the vertical direction only tiled

(2) application scenario

It can reduce the size of the picture by tiling background images to enhance the access speed of the page.

4. Background targeting properties:

important point:

With a label you can set the background color and background images at the same time, if the colors and images exist, then the picture will cover color.

1. If the control position of the background image:

It has called backgroud-position in CSS: property, location is designed to control the background image.

2. Format:

backgroud-position: horizontal vertical backgroup-position: 0 0

2. Value:

2.1 Specific Nouns

Horizontally: left center right

Vertical direction: top center bottom

2.2 Specific pixels

For example: 5px, 15px, 25px

Remember: the specific pixel is receiving negative.

The background and associated Acronym

(1) 背景属性缩写的格式

background :背景颜色、背景图片、平铺方式、关联方式、定位方式;(注意保存顺序)   连写(缩写)格式

<body>

<div> </div>

</body>

背景可以缩写成:

(2)注意点:

background 属性中,任何一个属性都可以被省略。

(3)什么是背景关联方式:

默认情况下,背景图片会随着滚动条的滚动而滚动,如果不想让背景图片随着滚动条的滚动而滚动。我们就可以修改背景图片和滚动条的关联方式。

(4)如何修改背景关联方式?

在CSS中有一个叫做background-attachment的属性,这个属性就是专门用于修改关联方式的。

格式:

background-attachment: scroll;

取值:

scroll: 默认值,会随着滚动条的滚动而滚动

fixed 不会随着滚动条的滚动而滚动

6、背景图片和插入图片的区别:

(1) 背景图片和插入图片区别?

 

1.1 背景图片仅仅是一个装饰,不会占用位置。插入图片会占用位置。

1.2  背景图片有定位属性,可以很方便的控制图片位置;

插入图片没有定位属性,所有控制图片的位置不太方便。

1.3  插入图片的语义比背景图片的语义要强,所以在企业开发中如果你的

图片想被搜索引擎收录,那么推荐使用插入图片。

7. 背景图片的练习:

 

8.CSS精灵图

1. 什么是CSS精灵图

CSS精灵图是一种图像合成技术

2.CSS精灵图作用:

可以减少请求的次数,以及可以降低服务器处理的压力

3.如何使用CSS精灵图:

CSS精灵图需要配合背景图片和背景定位来使用

Guess you like

Origin blog.csdn.net/weixin_40876986/article/details/90344952