Shulou(Shulou.com)06/01 Report--

This article is a detailed introduction to "CSS3 Background Example Analysis" for everyone. The content is detailed, the steps are clear, and the details are properly handled. I hope this article "CSS3 Background Example Analysis" can help you solve your doubts. Let's go deeper and learn new knowledge together with the ideas of the small editor.

CSS3 Background

CSS3 includes several new background attributes that provide greater control over background elements.

You will learn about the following background attributes:

background-image

background-size

background-origin

background-clip

CSS3background-image property

In CSS3, background images can be added via the background-image attribute.

Different background images and images are separated by commas, and the first image is displayed at the top of all images.

examples

#example1 {

background-image: url(img_flwr.gif), url(paper.gif);

background-position: right bottom, left top;

background-repeat: no-repeat, repeat;

}

You can set several different attributes for different images

examples

#example1 {

background: url(img_flwr.gif) right bottom no-repeat, url(paper.gif) left top repeat;

}

CSS3background-size property

background-size Specifies the size of the background image. Prior to CSS3, background image size was determined by the actual size of the image.

In CSS3, background images can be specified, so let's re-specify the size of background images in different environments. You can specify pixel or percentage sizes.

The size you specify is the size as a percentage of the width and height of the parent element.

Example 1

Reset background image:

div

{

background:url(img_flwr.gif);

background-size:80px 60px;

background-repeat:no-repeat;

}

Example 2

Stretch background image to completely fill content area:

div

{

background:url(img_flwr.gif);

background-size:100% 100%;

background-repeat:no-repeat;

}

Background-origin property of CSS3

The background-origin property specifies the location area of the background image.

The content-box,padding-box, and border-box areas can be used to place background images.

examples

Locate the background image in the content-box:

div

{

background:url(img_flwr.gif);

background-repeat:no-repeat;

background-size:100% 100%;

background-origin:content-box;

}

CSS3 Multiple Background Images

CSS3 allows you to add multiple background images to an element.

examples

Set two background images in the body element:

body

{

background-image:url(img_flwr.gif),url(img_tree.gif);

}

CSS3background-clip properties

The background-clip property in CSS3 is drawn from a specified position.

examples

#example1 {

border: 10px dotted black;

padding: 35px;

background: yellow;

background-clip: content-box;

}

Read here, this article "CSS3 background example analysis" article has been introduced, want to master the knowledge points of this article also need to practice to understand, if you want to know more related content of the article, welcome to pay attention to the industry information channel.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.