Hình nền html

Với cách áp dụng CSS cho thẻ hình ảnh, ảnh nền của bạn có thể chủ động tăng sức hút cho trang web của mình. Bởi vì, hình ảnh là yếu tố quan trọng giúp một trang web trở nên hấp dẫn. Đặc biệt, khi sử dụng hình ảnh một cách hiệu quả, việc làm website quảng cáo cũng dễ dàng hơn. Hãy cùng FUNiX tìm hiểu về cách áp dụng CSS cho ảnh qua nội dung bài viết dưới đây

>> Cách áp dụng CSS cho liên kết thẻ
>> Cách áp dụng CSS tạo danh sách
>> Cách áp dụng CSS cho bảng thẻ
>> Cách áp dụng CSS cho menu thẻ

1. Thuộc tính hình ảnh trong CSS

Để hình ảnh hiển thị cân đối và đẹp mắt, bạn có thể lựa chọn cách áp dụng CSS thông qua các thuộc tính sau

Để thay đổi chiều cao của hình ảnh khi hiển thị trên trang web, bạn có thể sử dụng thuộc tính chiều cao trong CSS. Thuộc tính này nhận giá trị chiều cao đo bằng px hoặc %. Nếu được xác định bằng đơn vị %, chiều cao của ảnh sẽ được tính hợp lệ với khối chứa ảnh đó

Ví dụ

   
   
   
      

      

      
   

      

      
   

Độ trong suốt của hình ảnh sẽ được điều chỉnh dựa trên thuộc tính -moz-opacity trong CSS. Các cụ thể như sau

Cú pháp soạn thảo -moz-opacity=x thì x có thể là một giá trị từ 0. 0 – 1. 0. Giá trị càng nhỏ thì độ trong suốt càng tăng. (Mozilla)

Soạn thảo bộ lọc cú pháp. alpha(opacity=x) thì x có thể là một giá trị từ 0 – 100. Giá trị càng nhỏ thì độ trong suốt sẽ càng tăng. (I E)

Ví dụ

   
   
   
      

   

      

      
   
 

2. Các thuộc tính ảnh nền trong CSS

Những cách áp dụng CSS trong công việc chỉnh sửa ảnh nền (nền) bằng các thuộc tính dưới đây

Để tạo màu nền trong CSS, bạn sử dụng thuộc tính background-color. Theo đó, bạn có thể sử dụng tên màu, giá trị Hex Code, giá trị Short Hex Code hoặc thuộc tính rgb()

Ví dụ.  

   
   
      

Phan noi dung nay co Background Color la mau vang

   
   
Sử dụng thuộc tính background-color để tạo màu nền trong CSS

Tạo màu nền bằng cách áp dụng CSS, bạn sử dụng hình nền thuộc tính. Giá trị url ở đây xác định đường dẫn đến nơi bạn lưu giữ hình ảnh

Ví dụ

   
      
      
         

Hoc CSS co ban tai FUNiX
      
   

• Tạo vị trí hình nền trong CSS

Muốn thiết lập vị trí cho hình nền, bạn sử dụng thuộc tính background-position trong CSS. Vị trí px được sử dụng để xác định giá trị cho thuộc tính

Còn nếu bạn muốn tạo hình nền ở định dạng cố định hoặc có thể cuộn được, thì bạn sử dụng thuộc tính background-attachment trong CSS. Thuộc tính này nhận hai giá trị là cuộn và cố định.  

• lặp lại hình nền trong CSS

Nếu muốn hình nền được nhắc đi nhắc lại theo chiều ngang hoặc theo chiều dọc, bạn có thể sử dụng thuộc tính lặp lại nền trong CSS. Thuộc tính này có các giá trị như sau

lặp lại (default). Hình nền được nhắc đi nhắc lại theo cả chiều dọc và chiều ngang.  

lặp lại-x. Hình nền chỉ lặp lại theo chiều ngang

lặp lại-y. Hình nền chỉ lặp lại theo chiều dọc

không lặp lại. Hình nền sẽ không bị nhắc đi nhắc lại nữa

Trên đây là cách áp dụng CSS cho hình ảnh thẻ, ảnh nền để bạn làm cho trang web của mình thêm phần nổi bật và có sức hút với bạn đọc hay khách hàng,… Mong rằng những chia sẻ trên đây của FUNiX sẽ hữu ích cho quá

Lưu ý. khi sử dụng hình ảnh làm nền, thì bạn nên sử dụng hình ảnh mà nó không gây ảnh hưởng lên các văn bản. If not image that will over over or doing Mờ chữ hoặc nội dung trang web của bạn

Dưới đây là ví dụ về sự kết hợp không tốt giữa văn bản và nền (hình nền)

Ví dụ 4

cơ thể người {
hình nền. url(“bgdesert. jpg”);
}

---

Hình nền – lặp lại ảnh theo chiều dọc hoặc ngang

Mặc định thì thuộc tính background-image sẽ phù hợp với cả 2 dạng dọc và ngang (ngang và dọc)

Một số ảnh nên được đặt ngang hoặc dọc, nếu không thì trông nó rất xấu, không đẹp mắt, giống như sau

Ví dụ 5

cơ thể người {
hình nền. url(“gradient_bg. png”);
}

If as the image on only was repeat on the width (background-repeat. repeat-x;), thì sẽ trông tốt hơn

Ví dụ 6

cơ thể người {
hình nền. url(“gradient_bg. png”);
Bối cảnh Lặp lại. lặp lại-x;
}

Lưu ý. Để lặp lại một hình ảnh theo chiều dọc (vertical), chúng ta đặt lặp lại nền. lặp lại-y;

---

Hình nền – Vị trí thiết lập và không khớp

Để hiển thị hình nền chỉ một lần cũng được xác định bởi thuộc tính lặp lại nền

Ví dụ 7

cơ thể người {
hình nền. url(“img_tree. png”);
Bối cảnh Lặp lại. không lặp lại;
}

Trong ví dụ trên hình nền hiển thị cùng nơi với văn bản. Chúng ta muốn thay đổi vị trí của hình ảnh, để nó không che khuất văn bản quá nhiều

Vị trí của hình ảnh được xác định với thuộc tính background-position

Ví dụ 8

cơ thể người {
hình nền. url(“img_tree. png”);
Bối cảnh Lặp lại. không lặp lại;
vị trí nền. trên cùng bên phải;
}

---

Hình nền – Cố định vị trí

Để chỉ định hình nền sẽ cố định (tức là nó sẽ không bị mất di chuyển khi cuộn), sử dụng thuộc tính background-attachment

Ví dụ 9

cơ thể người {
hình nền. url(“img_tree. png”);
Bối cảnh Lặp lại. không lặp lại;
vị trí nền. trên cùng bên phải;
tệp đính kèm nền. đã sửa;
}

---

Thuộc tính nền – Viết mã ngắn

Để rút ngắn mã, bạn có thể chỉ định tất cả các thuộc tính nền trên cùng một dòng duy nhất. Nó được gọi là thuộc tính Tốc ký

Ví dụ 10

cơ thể người {
lai lịch. #ffffff url(“img_tree. png”) không lặp lại trên cùng bên phải;
}

Khi sử dụng tốc ký thuộc tính thì thứ tự giá trị thuộc tính sẽ là

• màu nền
• hình nền
• Bối cảnh Lặp lại
• tệp đính kèm nền
• vị trí nền

Nếu nhu cầu của bạn không cần sử dụng hết thuộc tính này trong tốc ký thì không quan trọng, bạn chỉ việc bạn không đưa nó vào miễn phí sao linh hoạt theo thứ tự như trên đã được