Khóa học IT CSS Cơ bản 023_Hình ảnh, Nền

Hình ảnh

Hình ảnh là loại phương tiện rất quan trọng trên trang web. Sử dụng hình ảnh một cách phù hợp có thể làm cho trang web đầy màu sắc và sống động, không còn bị giới hạn bởi văn bản lạnh lùng.

Bố cục hình ảnh

Phần tử img mặc định là phần tử inline và có margin mặc định 5px. Bằng cách đặt thành phần tử cấp khối, chỉ có thể hiển thị một hình ảnh trên mỗi dòng. Bằng cách đặt thành phần tử inline, nhiều hình ảnh có thể được hiển thị trên một dòng. Sử dụng thuộc tính margin để định vị bố cục phần tử cấp khối, và sử dụng thuộc tính text-align để định vị bố cục phần tử inline.

Ví dụ:

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="" >

Hiệu ứng:

Độ trong suốt hình ảnh

Trong CSS, bạn có thể sử dụng thuộc tính opacity để đặt độ trong suốt của các phần tử (bao gồm hình ảnh). Thuộc tính này chấp nhận giá trị từ 0 (hoàn toàn trong suốt) đến 1 (hoàn toàn đục).

Nếu bạn chỉ muốn làm trong suốt nền của hình ảnh mà không ảnh hưởng đến nội dung, bạn có thể sử dụng giá trị màu RGBA.

Ví dụ:

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

Hiệu ứng:

Bo tròn góc hình ảnh

Trong CSS, bạn có thể sử dụng thuộc tính border-radius để thêm bo tròn góc cho hình ảnh. Thuộc tính này được sử dụng để đặt độ cong của các góc viền phần tử.

Ví dụ:

1
<img style="border-radius: 10px;" src="zhaojian1.jpg" alt="" >
2
<!-- Đặt bán kính bo tròn, có thể điều chỉnh theo nhu cầu -->
3
<img style="border-radius: 20px 10px;" src="zhaojian1.jpg" alt="" >
4
<!-- Bán kính ngang 20px, bán kính dọc 10px -->
5
<img style="border-radius: 10px 20px 15px 5px;" src="zhaojian1.jpg" alt="" >
6
<!-- Trên trái 10px, trên phải 20px, dưới phải 15px, dưới trái 5px -->

Hiệu ứng:

Bóng hình ảnh

Trong CSS, bạn có thể sử dụng thuộc tính box-shadow để thêm hiệu ứng bóng cho hình ảnh. Thuộc tính này cho phép bạn thêm các hiệu ứng chiếu, bao gồm màu bóng, bán kính mờ, offset, v.v.

Ví dụ:

1
<img style="box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.5);" src="zhaojian1.jpg" alt="" >
2
<br><br>
3
<!-- Offset ngang 5px, offset dọc 5px, bán kính mờ 10px, màu bóng là màu đen bán trong suốt -->
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
<!-- Hiệu ứng bóng ngoài và bóng trong, sử dụng từ khóa inset để chỉ định bóng trong -->

Hiệu ứng:

Nền

Trong CSS, nền là một trong những kiểu thường được sử dụng trong thiết kế web, dùng để đặt kiểu nền của các phần tử.

Màu nền

Đặt màu nền của phần tử thông qua thuộc tính background-color.

Ví dụ:

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

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

Hiệu ứng:

Hình nền

Đặt hình nền của phần tử thông qua thuộc tính background-image. Bạn có thể sử dụng đường dẫn tương đối, đường dẫn tuyệt đối hoặc URL cho hình ảnh.

Ví dụ:

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

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

Hiệu ứng:

Lặp nền (Xếp gạch)

Đặt chế độ lặp hình nền thông qua thuộc tính background-repeat, có thể là ngang, dọc, cả hai hướng, hoặc không lặp.

• repeat: Hình ảnh lặp theo cả hướng ngang và dọc (mặc định)
• repeat-x: Hình ảnh lặp theo hướng ngang
• repeat-y: Hình ảnh lặp theo hướng dọc
• no-repeat: Hình ảnh chỉ xếp gạch một lần

Ví dụ:

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
    Không lặp
2
    <div class="base example1"></div>
3
    Lặp ngang
4
    <div class="base example2"></div>
5
    Lặp dọc
6
    <div class="base example3"></div>

Hiệu ứng:

Kích thước nền

Đặt kích thước hình nền thông qua thuộc tính background-size, có thể là giá trị pixel cụ thể, phần trăm, hoặc các từ khóa như cover hoặc contain.

• Mặc định: Hiển thị đầy đủ hình nền gốc.
• auto: Co giãn theo tỷ lệ hình ảnh làm nền, hình ảnh sẽ lặp và xếp gạch
• cover: Hình ảnh mở rộng để phủ toàn bộ vùng, giữ nguyên tỷ lệ. Hình ảnh có thể không hiển thị hoàn toàn, với phần tràn ra ngoài.
• contain: Hình ảnh co giãn tối đa có thể trong khi giữ nguyên tỷ lệ khung hình, làm cho chiều cao hoặc chiều rộng vừa với toàn bộ vùng nền. Co giãn có thể gây ra vùng trống một phần trong nền, và vùng trống của container sẽ hiển thị màu nền được đặt bởi background-color.

Ví dụ:

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>

Hiệu ứng:

Vị trí nền

Đặt vị trí bắt đầu của hình nền thông qua thuộc tính background-position, có thể sử dụng giá trị pixel, phần trăm, hoặc từ khóa.

• Có thể sử dụng bất kỳ đơn vị độ dài nào. Nếu vị trí thứ hai (hướng trục Y) không được khai báo, mặc định là 50% (nếu cả hai vị trí không được đặt, mặc định là 0% 0%)
• Từ khóa vị trí (left/right/top/bottom/center), có thể sử dụng đơn lẻ hoặc kết hợp (nếu từ khóa thứ hai không được khai báo, mặc định là center)
• Sử dụng kết hợp

Ví dụ:

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>

Hiệu ứng:

Cố định nền

Đặt xem hình nền có cố định hay cuộn theo nội dung thông qua thuộc tính background-attachment.

• scroll: Hình nền di chuyển theo cuộn trang (mặc định)
• fixed: Hình nền không di chuyển theo cuộn trang
• local: Hình nền cuộn theo cuộn nội dung phần tử.

Ví dụ:

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

Hiệu ứng:

Viết tắt nền

Thuộc tính background có thể được viết tắt, ngắn gọn hơn nhiều so với khai báo từng thuộc tính con riêng lẻ và cần ít mã hơn. Vì có nhiều thuộc tính con của background, cách sắp xếp thứ tự viết tắt của các thuộc tính con cũng là một thách thức. CSS2 khuyến nghị một quy tắc thứ tự viết tắt thuộc tính con:

Ví dụ:

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
}