Làm cách nào để cung cấp cho hình ảnh một URL trong css?

Question

Chúng tôi có thể thêm hình ảnh làm liên kết và các phần tử HTML khác làm liên kết. Một liên kết là một kết nối từ một trang Web đến một trang web khác

Nội dung chính Show

Cú pháp hình nền
Cách dừng lặp lại nền
Cách đặt vị trí nền
Cách thay đổi kích thước hình nền
Cách sử dụng thuộc tính tệp đính kèm nền
Độ dốc nền
Phần kết luận

Chúng tôi có thể thêm các liên kết trang vào một trang web. Liên kết HTML là siêu liên kết. Thẻ xác định một siêu liên kết và được sử dụng để liên kết từ trang này sang trang khác. Thuộc tính href được sử dụng với thẻ, cho biết đích của liên kết

Để tạo liên kết trang trong trang HTML, hãy sử dụng thẻ và, với thuộc tính href được sử dụng để xác định liên kết. Chúng ta nên sử dụng các thẻ … bên trong … thẻ

cú pháp

Sau đây là cú pháp để thêm hình ảnh dưới dạng liên kết trên trang web

Thí dụ

Sau đây là chương trình ví dụ để tạo hình ảnh dưới dạng liên kết

Làm cách nào để cung cấp cho hình ảnh một URL trong css?

Sau đây là đầu ra cho hình ảnh dưới dạng liên kết, nhấp vào hình ảnh sẽ điều hướng chúng ta đến trang web đích

Các trang web thường thêm hình ảnh bằng cách sử dụng thẻ "img" HTML nội tuyến. Mã hóa CSS thường không đặt nguồn của hình ảnh vì CSS kiểm soát thiết kế hơn là nội dung. Tuy nhiên, CSS hỗ trợ các thuộc tính mà HTML thuần túy không có, chẳng hạn như độ mờ của hình ảnh. Ví dụ: nếu bạn muốn ảnh trong suốt về trụ sở công ty xuất hiện trên trang chủ trang web của mình, bạn có thể đặt ảnh này bằng CSS. Kiểu CSS chọn nguồn hình ảnh bằng thuộc tính hình nền

1
Mở biểu định kiểu trang web của bạn bằng trình soạn thảo HTML hoặc trình soạn thảo văn bản
2
Dán đoạn mã sau vào trang tính để tạo kiểu mới
styledimg {____2_______
}
3
Thay thế "đường dẫn" bằng URL của hình ảnh trong trang web. Ví dụ: nếu hình ảnh "tòa nhà. jpg" nằm trong thư mục "hình ảnh" của trang web của bạn, hãy thay đổi mã thành
styledimg {____3_______
}
4
Thay "10" bằng chiều rộng của ảnh và thay "20" bằng chiều cao của ảnh. Ví dụ: nếu hình ảnh có kích thước cao 200 pixel và rộng 600 pixel, hãy thay đổi mã thành

Những gì người dùng nhìn thấy trên một trang web sẽ ảnh hưởng đến trải nghiệm người dùng của họ tốt như thế nào. Nó cũng sẽ ảnh hưởng đến mức độ dễ dàng mà họ có thể sử dụng toàn bộ trang web nói chung
Thêm hình ảnh vào nền của một số phần nhất định của trang web thường hấp dẫn và thú vị hơn là chỉ thay đổi màu nền
Các trình duyệt hiện đại hỗ trợ nhiều loại tệp hình ảnh như
```
section {
    background-repeat: repeat;
        }
```
3,
```
section {
    background-repeat: repeat;
        }
```
4,
```
section {
    background-repeat: repeat;
        }
```
5 và
```
section {
    background-repeat: repeat;
        }
```
6
Bài viết này giải thích cách thêm hình ảnh vào mã HTML của bạn và cách tinh chỉnh chúng để trông đẹp hơn
Cú pháp hình nền
Bước đầu tiên là đảm bảo bạn tạo một thư mục nội dung (thư mục) để chứa các hình ảnh bạn muốn sử dụng trong dự án của mình
Ví dụ: chúng tôi có thể tạo một thư mục
```
section {
    background-repeat: repeat;
        }
```
7 trong dự án mà chúng tôi đang thực hiện và thêm một hình ảnh có tên là
```
section {
    background-repeat: repeat;
        }
```
8 mà chúng tôi muốn sử dụng
Thuộc tính CSS
```
section {
    background-repeat: repeat;
        }
```
9 cho phép bạn đặt hình ảnh phía sau bất kỳ thành phần HTML nào bạn muốn
Đây có thể là toàn bộ trang (bằng cách sử dụng bộ chọn
```
section {
    background-repeat: no-repeat;
        }
```
0 trong CSS nhắm mục tiêu phần tử
```
section {
    background-repeat: no-repeat;
        }
```
1 trong HTML của chúng tôi) hoặc chỉ một phần cụ thể độc lập của trang, chẳng hạn như phần tử
```
section {
    background-repeat: no-repeat;
        }
```
2 như trong ví dụ bên dưới
Để thêm
```
section {
    background-repeat: repeat;
        }
```
9 vào thẻ phần trong tệp
```
section {
    background-repeat: no-repeat;
        }
```
4 của bạn, hãy viết đoạn mã sau
```
section {
     background-image: url("images/sunset.png");
        }
```
Hãy thảo luận về những gì đang xảy ra ở đây một cách chi tiết
- ```
section {
    background-repeat: no-repeat;
        }
```
  2 chỉ định thẻ bạn muốn thêm hình ảnh vào
- ```
section {
    background-repeat: no-repeat;
        }
```
  6 được sử dụng để cho CSS biết vị trí của hình ảnh của chúng ta
- Bên trong dấu ngoặc đơn,
```
section {
    background-repeat: no-repeat;
        }
```
  7 là đường dẫn đến hình ảnh. Điều này cho phép trình duyệt biết URL nào cần kéo
- Đường dẫn trong ví dụ này được gọi là đường dẫn
```
section {
    background-repeat: no-repeat;
        }
```
  8 có nghĩa là nó là tệp cục bộ, liên quan đến dự án của chúng tôi và thư mục làm việc hiện tại của chúng tôi và không phải là địa chỉ web. Để thêm hình ảnh, chúng tôi cũng có thể sử dụng đường dẫn
```
section {
    background-repeat: no-repeat;
        }
```
  9, đây là địa chỉ web đầy đủ và bắt đầu bằng URL tên miền (
```
section {
    background-repeat: repeat-y;
        }
```
  0)
- Sử dụng dấu ngoặc kép là một thói quen tốt nhưng chúng ta có thể bỏ qua chúng, vì vậy
```
section {
    background-repeat: repeat-y;
        }
```
  1 cũng hoạt động như vậy
- Đừng quên dấu chấm phẩy
Cách dừng lặp lại nền
Khi bạn áp dụng hình nền cho một thành phần, theo mặc định, nó sẽ tự lặp lại
Nếu hình ảnh nhỏ hơn thẻ mà nó là nền, nó sẽ lặp lại để điền vào thẻ
Làm thế nào để chúng ta ngăn chặn điều này xảy ra?
Thuộc tính
```
section {
    background-repeat: repeat-y;
        }
```
2 nhận 4 giá trị và chúng tôi có thể thay đổi hướng mà hình ảnh lặp lại hoặc ngăn hình ảnh lặp lại cùng nhau
```
section {
    background-repeat: repeat;
        }
```
Đây là giá trị mặc định nếu chúng ta không gán giá trị cho thuộc tính
```
section {
    background-repeat: repeat-y;
        }
```
2. Trong trường hợp này, hình ảnh được lặp lại theo cả chiều ngang và chiều dọc theo cả hướng x và hướng y tương ứng cho đến khi nó lấp đầy không gian
```
section {
    background-repeat: no-repeat;
        }
```
Giá trị
```
section {
    background-repeat: repeat-y;
        }
```
4 ngăn hình ảnh tự lặp lại từ mọi hướng. Hình ảnh chỉ được hiển thị một lần
```
section {
    background-repeat: repeat-y;
        }
```
Giá trị này chỉ lặp lại hình ảnh theo chiều ngang trên trang. Hình ảnh được lặp lại trên trang, trong
```
section {
    background-repeat: repeat-y;
        }
```
5.
```
section {
    background-repeat: repeat-y;
        }
```
5 trong toán học là từ trái sang phải
```
section {
    background-repeat: repeat-y;
        }
```
Giá trị này chỉ lặp lại hình ảnh theo chiều dọc trên trang. Hình ảnh được lặp lại trên trang, trong
```
section {
    background-repeat: repeat-y;
        }
```
7.
```
section {
    background-repeat: repeat-y;
        }
```
7 trong môn toán là từ trên xuống dưới
Cách đặt vị trí nền
Sau khi thêm hình nền và ngăn nó lặp lại, chúng tôi có thể kiểm soát thêm hình thức của nó trong nền của thẻ bằng cách cải thiện vị trí của nó
Chúng ta sẽ sử dụng thuộc tính
```
section {
    background-repeat: repeat-y;
        }
```
9 để làm điều này
Bộ chọn nhận hai giá trị. Cái đầu tiên dành cho vị trí nằm ngang hoặc hướng x (khoảng cách trên thẻ). Cái thứ hai dành cho vị trí thẳng đứng hoặc hướng y (thẻ bao xa)
Các giá trị có thể là đơn vị, như một cặp pixel
```
section {
    background-position: 20px 30px;
        }
```
Điều này sẽ di chuyển hình ảnh theo chiều ngang 20px và 30px xuống dưới thẻ chứa
Thay vì pixel, chúng ta có thể sử dụng một bộ từ khóa như phải, trái, trên, dưới hoặc giữa để đặt hình ảnh ở bên phải, trái, trên, dưới hoặc giữa của thẻ
```
section {
    background-position: right center;
        }
```
Điều này đặt hình ảnh ở phía bên phải của trung tâm của thẻ
Nếu chúng ta muốn căn giữa nó theo cả chiều ngang và chiều dọc, chúng ta sẽ làm như sau
```
section {
    background-position: center center;
        }
```
Để định vị một hình ảnh với chi tiết tốt hơn, điều đáng nói là chúng ta có thể sử dụng tỷ lệ phần trăm
```
section {
    background-position: 20% 40%;
        }
```
Điều này định vị hình ảnh 20% trên thẻ và 40% bên dưới thẻ
Cho đến nay, chúng ta đã thấy các giá trị được sử dụng kết hợp, nhưng chúng ta cũng có thể chỉ định một giá trị như
```
section {
    background-repeat: repeat-y;
        }
```
0 hoặc
```
section {
    background-repeat: repeat-y;
        }
```
1 hoặc
```
section {
    background-repeat: repeat-y;
        }
```
2, áp dụng giá trị đó cho cả hai hướng

Cách thay đổi kích thước hình nền
Để kiểm soát kích thước của hình nền, chúng ta có thể sử dụng thuộc tính kích thước nền
Một lần nữa, giống như các thuộc tính trước đó đã đề cập, nó nhận hai giá trị. Một cho kích thước ngang (x) và một cho kích thước dọc (y)
Chúng ta có thể sử dụng pixel, như vậy
```
section {
    background-size: 20px 40px;
    /* sizes the image 20px across and 40px down the page */
        }
```
Nếu chúng tôi không biết chính xác chiều rộng của vùng chứa mà chúng tôi đang lưu trữ hình ảnh trong đó, thì có một tập hợp các giá trị cụ thể mà chúng tôi có thể cung cấp cho thuộc tính
- ```
section {
    background-repeat: repeat-y;
        }
```
  3 thay đổi kích thước hình nền để nó bao phủ toàn bộ không gian nền của thẻ bất kể chiều rộng của thẻ. Nếu hình ảnh quá lớn và có tỷ lệ lớn hơn so với thẻ nằm trong đó, điều này có nghĩa là hình ảnh sẽ bị kéo dài và do đó bị cắt ở các cạnh của nó
- ```
section {
    background-repeat: repeat-y;
        }
```
  4 chứa hình ảnh, đúng như tên gọi. Nó sẽ đảm bảo toàn bộ hình ảnh được hiển thị trong nền mà không cắt bỏ bất kỳ hình ảnh nào. Nếu hình ảnh nhỏ hơn nhiều so với thẻ, sẽ có khoảng trống bị bỏ trống, điều này sẽ khiến nó phải lặp lại để lấp đầy, vì vậy chúng ta có thể sử dụng quy tắc
```
section {
    background-repeat: repeat-y;
        }
```
  5 mà chúng tôi đã đề cập trước đó
Quy tắc
```
section {
    background-repeat: repeat-y;
        }
```
6 trong trường hợp này sẽ cắt các phần của hình ảnh
Khi chúng tôi thay đổi nó thành
```
section {
    background-repeat: repeat-y;
        }
```
7, chúng tôi thấy rằng hình ảnh co lại để phù hợp với thẻ phần
Cách sử dụng thuộc tính tệp đính kèm nền
Với thuộc tính
```
section {
    background-repeat: repeat-y;
        }
```
8, chúng ta có thể kiểm soát vị trí hình nền được đính kèm, nghĩa là hình ảnh có cố định hay không với trình duyệt
Giá trị mặc định là
```
section {
    background-repeat: repeat-y;
        }
```
9, trong đó hình nền nằm cùng với thẻ của nó và tuân theo luồng tự nhiên của trang bằng cách cuộn lên và cuộn xuống khi chúng tôi cuộn lên và xuống
Giá trị thứ hai mà tài sản có thể có là
```
section {
    background-position: 20px 30px;
        }
```
0
Điều này làm cho hình nền ở cùng một vị trí, cố định vào trang và cố định trên chế độ xem của trình duyệt. Điều này tạo ra hiệu ứng thị sai mà bạn có thể xem ví dụ tại đây
See the Pen của Dionysia Lemonaki (@deniselemonaki) trên CodePen
Độ dốc nền
Một trường hợp sử dụng khác cho thuộc tính
```
section {
    background-repeat: repeat;
        }
```
9 là yêu cầu trình duyệt tạo một dải màu
```
section {
    background-repeat: repeat;
        }
```
9 trong trường hợp này không có URL mà thay vào đó là một gradient tuyến tính
Cách đơn giản nhất để làm điều này là xác định góc. Điều này kiểm soát hướng của gradient và cách phối màu. Cuối cùng, thêm hai màu mà bạn muốn trộn với nhau trong một dải màu cho nền của thẻ
Một gradient đi từ trên xuống dưới và từ đen sang trắng là
```
section {
    background-repeat: repeat;
        }
```
0
Các độ phổ biến nhất được sử dụng cho độ dốc là
- ```
section {
    background-position: 20px 30px;
        }
```
  3 từ trên xuống dưới
- ```
section {
    background-position: 20px 30px;
        }
```
  4 từ trái sang phải
- ```
section {
    background-position: 20px 30px;
        }
```
  5 từ dưới lên trên
- ```
section {
    background-position: 20px 30px;
        }
```
  6 từ phải sang trái
Mỗi độ trên tương ứng với
```
section {
    background-position: 20px 30px;
        }
```
7,
```
section {
    background-position: 20px 30px;
        }
```
8,
```
section {
    background-position: 20px 30px;
        }
```
9 và
```
section {
    background-position: right center;
        }
```
0, tương ứng
```
section {
    background-repeat: repeat;
        }
```
1
See the Pen của Dionysia Lemonaki (@deniselemonaki) trên CodePen
Thay vì màu từ khóa, chúng ta có thể sử dụng màu hex để cụ thể hơn và có nhiều tùy chọn hơn
```
section {
    background-repeat: repeat;
        }
```
2
See the Pen của Dionysia Lemonaki (@deniselemonaki) trên CodePen
Chúng tôi cũng có thể bao gồm nhiều hơn hai màu trong một dải màu, tạo ra các hiệu ứng và cách phối màu khác nhau
Phần kết luận
Điều này đánh dấu phần cuối của phần giới thiệu về cú pháp cơ bản của thuộc tính
```
section {
    background-repeat: repeat;
        }
```
9
Từ đây, khả năng là vô tận và có nhiều chỗ cho rất nhiều biểu hiện sáng tạo. Những hiệu ứng này giúp người dùng có trải nghiệm thú vị khi truy cập trang web của bạn
Tôi hy vọng điều này là hữu ích, và cảm ơn bạn đã đọc

Hãy vui vẻ với thiết kế của bạn và viết mã vui vẻ
QUẢNG CÁO
QUẢNG CÁO
QUẢNG CÁO
QUẢNG CÁO
QUẢNG CÁO
QUẢNG CÁO
QUẢNG CÁO
QUẢNG CÁO

Dionysia Lemonaki

Học một cái gì đó mới mỗi ngày và viết về nó

Nếu bài viết này hữu ích, hãy tweet nó

Học cách viết mã miễn phí. Chương trình giảng dạy mã nguồn mở của freeCodeCamp đã giúp hơn 40.000 người có được việc làm với tư cách là nhà phát triển. Bắt đầu

programming css

Làm cách nào để cung cấp cho hình ảnh một URL trong css?

cú pháp

Thí dụ

1

2

3

4

Cú pháp hình nền

Cách dừng lặp lại nền

Cách đặt vị trí nền

Cách thay đổi kích thước hình nền

Cách sử dụng thuộc tính tệp đính kèm nền

Độ dốc nền

Phần kết luận

Bài Viết Liên Quan

Quảng Cáo

Có thể bạn quan tâm

Toplist được quan tâm

Quảng cáo

Xem Nhiều

Quảng cáo

Chúng tôi

Điều khoản

Trợ giúp

Mạng xã hội