IT Course CSS Basics 023_Images, Backgrounds

Images

Images are a very important media type on web pages. Using images appropriately can make web pages colorful and vivid, no longer limited to cold text.

Image Layout

The img element is an inline element by default and has a default 5px margin. By setting it as a block-level element, only one image can be displayed per line. By setting it as an inline element, multiple images can be displayed in one line. Use the margin property for block-level element layout positioning, and use the text-align property for inline element layout positioning.

Example:

1
<img src="zhaojian1.jpg" alt="" >
2
<img src="zhaojian1.jpg" alt="" >
3
<img src="zhaojian1.jpg" alt="" >
4
<img style="display: block;" src="zhaojian1.jpg" alt="" >
5
<img style="display: block;" src="zhaojian1.jpg" alt="" >
6
<img style="display: block;margin: 0 auto;" src="zhaojian1.jpg" alt="" >

Effect:

Image Transparency

In CSS, you can use the opacity property to set the transparency of elements (including images). This property accepts a value ranging from 0 (completely transparent) to 1 (completely opaque).

If you only want to make the image background transparent without affecting the content, you can use RGBA color values.

Example:

1
<img src="zhaojian1.jpg" alt="" >
2
<img style="opacity: 0.5;" src="zhaojian1.jpg" alt="" >

Effect:

Image Rounded Corners

In CSS, you can use the border-radius property to add rounded corners to images. This property is used to set the curvature of element border corners.

Example:

1
<img style="border-radius: 10px;" src="zhaojian1.jpg" alt="" >
2
<!-- Set rounded corner radius, can be adjusted as needed -->
3
<img style="border-radius: 20px 10px;" src="zhaojian1.jpg" alt="" >
4
<!-- Horizontal radius 20px, vertical radius 10px -->
5
<img style="border-radius: 10px 20px 15px 5px;" src="zhaojian1.jpg" alt="" >
6
<!-- Top-left 10px, top-right 20px, bottom-right 15px, bottom-left 5px -->

Effect:

Image Shadow

In CSS, you can use the box-shadow property to add shadow effects to images. This property allows you to add projection effects, including shadow color, blur radius, offset, etc.

Example:

1
<img style="box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.5);" src="zhaojian1.jpg" alt="" >
2
<br><br>
3
<!-- Horizontal offset 5px, vertical offset 5px, blur radius 10px, shadow color is semi-transparent black -->
4
<img style="box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.5), -5px -5px 10px rgba(255, 255, 255, 0.7) inset;" src="zhaojian1.jpg" alt="" >
5
<!-- Outer and inner shadow effects, use inset keyword to specify inner shadow -->

Effect:

Background

In CSS, background is one of the commonly used styles in web design, used to set the background style of elements.

Background Color

Set element background color through the background-color property.

Example:

1
    .example1 {
2
        background-color: #f0f0f0;
3
        width: 500px;
4
        height: 500px;
5
    }

1
    <div class="example1"></div>

Effect:

Background Image

Set element background image through the background-image property. You can use relative path, absolute path, or URL for images.

Example:

1
    .example1 {
2
        background-image: url('zhaojian.jpg');
3
        width: 500px;
4
        height: 500px;
5
    }

1
    <div class="example1"></div>

Effect:

Background Repeat (Tiling)

Set background image repeat mode through the background-repeat property, which can be horizontal, vertical, both directions, or no repeat.

• repeat: Image repeats in both horizontal and vertical directions (default)
• repeat-x: Image repeats in horizontal direction
• repeat-y: Image repeats in vertical direction
• no-repeat: Image only tiles once

Example:

1
    .base {
2
        background-image: url('zhaojian1.jpg');
3
        width: 200px;
4
        height: 200px;
5
    }
6
    .example1 {
7
        background-repeat: no-repeat;
8
    }
9
    .example2 {
10
        background-repeat: repeat-x;
11
    }
12
    .example3 {
13
        background-repeat: repeat-y;
14
    }

1
    No repeat
2
    <div class="base example1"></div>
3
    Horizontal repeat
4
    <div class="base example2"></div>
5
    Vertical repeat
6
    <div class="base example3"></div>

Effect:

Background Size

Set background image size through the background-size property, which can be specific pixel values, percentages, or keywords like cover or contain.

• Default: Complete display of original background image.
• auto: Scale as background with image ratio, image will repeat and tile
• cover: Image extends to cover entire area, maintaining ratio. Image may not display completely, with partial overflow.
• contain: Image scales as much as possible while maintaining aspect ratio, making height or width fit the entire background area. Scaling may cause partial blank areas in background, and the container’s blank area will show the background color set by background-color.

Example:

1
    .base {
2
        width: 200px;
3
        height: 200px;
4
    }
5
    .example1 {
6
        background-image: url('zhaojian.jpg');
7
        background-size: auto;
8
    }
9
    .example2 {
10
        background-image: url('zhaojian2.jpg');
11
        background-size: cover;
12
    }
13
    .example3 {
14
        background-image: url('zhaojian2.jpg');
15
        background-size: contain;
16
    }
17
    .example4 {
18
        background-image: url('zhaojian2.jpg');
19
        background-size: 50% 100%;
20
    }

1
    <div class="base example1"></div>
2
    <br>
3
    <div class="base example2"></div>
4
    <br>
5
    <div class="base example3"></div>
6
    <br>
7
    <div class="base example4"></div>

Effect:

Background Position

Set background image starting position through the background-position property, which can use pixel values, percentages, or keywords.

• Any length unit can be used. If the second position (Y-axis direction) is not declared, default is 50% (if both positions are not set, default is 0% 0%)
• Position keywords (left/right/top/bottom/center), can be used singly or in pairs (if second keyword is not declared, default is center)
• Mixed use

Example:

1
    .base {
2
        background-image: url('zhaojian1.jpg');
3
        background-repeat: no-repeat;
4
        background-color: #d6d7d8;
5
        width: 200px;
6
        height: 200px;
7
    }
8
    .example1 {
9
        background-position: center top;
10
    }
11
    .example2 {
12
        background-position: 50% 50%;
13
    }
14
    .example3 {
15
        background-position: 50% bottom;
16
    }

1
    <div class="base example1"></div>
2
    <br>
3
    <div class="base example2"></div>
4
    <br>
5
    <div class="base example3"></div>

Effect:

Background Attachment (Fixed)

Set whether background image is fixed or scrolls with content through the background-attachment property.

• scroll: Background image moves with page scroll (default)
• fixed: Background image does not move with page scroll
• local: Background image scrolls with element content scrolling.

Example:

1
.example1 {
2
  background-attachment: scroll;
3
}
4
.example2 {
5
  background-attachment: fixed;
6
}
7
.example3 {
8
  background-attachment: local;
9
}

Effect:

Background Shorthand

The background property can be written in shorthand, which is much more concise than declaring individual sub-properties and requires less code. Since there are many background sub-properties, how to arrange the sub-property shorthand order is also a challenge. CSS2 recommends a sub-property shorthand order rule:

Example:

1
.example1{
2
  background: color image repeat attachment position/size;
3
}
4

5
.example2{
6
  background: #ffffff url('img_tree.png') no-repeat right top;
7
}