Hướng dẫn css background-color

Tạm gác qua các khái niệm về Box Model qua một bên mà ở phần này chúng ta sẽ làm quen với một loại thuộc tính cũng rất thú vị và có tác dụng làm đẹp website của bạn lên hơn, đó là các thuộc tính thêm màu nền và ảnh nền cho website hoặc bất kỳ một phần tử dạng block nào.




Màu nền với background-color

Nếu bạn muốn thiết lập màu nền bằng CSS thì có thể sử dụng thuộc tính background-color và giá trị của nó là tên màu, hoặc mã màu HEX/RBG, mình thì thường dùng nhất là mã màu Hex vì nó đa dạng và dễ dùng hơn.

Ảnh nền với background-image

Đối với thuộc tính thêm ảnh nền thì chúng ta sẽ sử dụng background-image và nó còn có thêm khá nhiều thuộc tính khác nữa kèm theo mà mình sẽ nói bên dưới. Dưới đây là ví dụ lấy một tấm ảnh sử dụng làm ảnh nền.

[codepen id=”dPBqbN”]

Nhớ là đối với các giá trị loại URL thì bạn phải có một cái hàm url() để bọc cái đường dẫn của URL lại nhé.

Ngoài ra, bạn có thể thêm nhiều ảnh nền khác nhau trên cùng một block bằng cách sử dụng nhiều giá trị url() và các giá trị phải được cách nhau bởi dấu phẩy. Ví dụ:

background-image: url(‘ảnh 1’), url(‘ảnh 2’);

Tùy chỉnh lặp lại ảnh nền với background-repeat

Mặc định khi sử dụng ảnh nền, thì hình ảnh sẽ được lặp đi lặp lại theo cả chiều ngang và chiều dọc cho đến khi ảnh nền lấp toàn bộ phần tử. Nhưng bạn cũng có thể tùy chỉnh lại việc lặp ảnh nền thông qua thuộc tính background-repeat, nó hỗ trợ các giá trị như sau:

  • no-repeat: Không lặp.
  • repeat-x: Lặp theo chiều ngang.
  • repeat-y: Lặp theo chiều dọc.
  • space: Lặp đều theo chiều ngang và chiều dọc, ảnh nền sẽ cách nhau bằng khoảng trắng.
  • round: Chưa hiểu lắm nên không giải thích.
  • repeat: Mặc định.

Một ví dụ của DMD về việc lặp ảnh nền.

[codepen id=”yydQNK”]

Đổi vị trí ảnh nền với background-position

Đối với các tấm ảnh nền cỡ nhỏ hoặc dùng background-size để sửa lại kích thước thì có thể bạn sẽ cần thay đổi vị trí hiển thị của ảnh nền đó, và bạn có thể dùng thuộc tính background-position này. Nó có một số giá trị như sau:

  • top: hiển thị ở trên đầu phần tử.
  • bottom: hiển thị bên dưới phần tử.
  • left: hiển thị bên trái phần tử.
  • right: hiển thị bên phải phần tử.
  • center: hiển thị chính giữa phần tử.
  • y-x: tùy biến vị trí hiển thị theo tọa độ, giá trị đứng trước là y và đứng sau là x. Ví dụ: 15px 10px

Đối với thuộc tính này thì bạn có thể viết tối đa cùng lúc hai giá trị. Ví dụ bạn muốn ảnh của bạn sẽ nằm bên phải phía trên phần tử thì sẽ có giá trị là left top. Bạn cũng có thể thiết lập giá trị cho nhiều ảnh nền cùng lúc kiểu left top, top center.

Ngoài ra còn có thêm một vài thuộc tính dành riêng cho việc tùy biến ảnh nền nữa nhưng bạn có thể tham khảo thêm tại CSS Reference nhé.

Lời kết

Mặc dù trong bài này mình không nói hết toàn bộ thuộc tính liên quan đến ảnh nền nhưng ở trên là các thuộc tính mà mình nghĩ rằng bạn sẽ cần sử dụng nhiều nhất nên bạn cứ tập trung làm quen với các thuộc tính đó trước, từ đó bạn sẽ cảm thấy bắt đầu với các thuộc tính tương tự dễ dàng hơn.

Thạch Phạm

Bé Thạch 18 tuổi, hiện công tác tại AZDIGI với vị trí giữ xe và viết thuê tại ThachPham.Com. Sở thích nghiên cứu về website, DevOps, SysAdmin và xăm mình nữa. Phương châm sống của bé là "No Pain, No Gain".

Hiện tại blog tạm đóng bình luận vì mình cần tập trung thời gian vào cập nhật bài viết. Bình luận sẽ mở ra cho đến khi mình sẵn sàng.

Hướng dẫn css background-color
Nhóm phát triển của chúng tôi vừa ra mắt website langlearning.net học tiếng Anh, Nga, Đức, Pháp, Việt, Trung, Hàn, Nhật, ... miễn phí cho tất cả mọi người.
Là một website được viết trên công nghệ web Flutter vì vậy hỗ trợ rất tốt cho người học, kể cả những người học khó tính nhất.
Hiện tại website đang tiếp tục được cập nhập nội dung cho phong phú và đầy đủ hơn. Mong các bạn nghé thăm và ủng hộ website mới của chúng tôi.

Hướng dẫn css background-color
Hãy theo dõi chúng tôi trên Fanpage để nhận được thông báo mỗi khi có bài viết mới.
Hướng dẫn css background-color
Facebook

1- Tổng quan về CSS Background

CSS cung cấp một vài thuộc tính (property) giúp bạn định nghĩa các hiệu ứng cho nền (background) cho một phần tử, chúng là:

  • background-color
  • background-image
  • background-repeat
  • background-attachment
  • background-position

2- CSS background-color

CSS background-color được sử dụng để sét mầu nền cho một phần tử.


/* Keyword values */
background-color: red;
background-color: indigo;

/* Hexadecimal value */
background-color: #bbff00;    /* Fully opaque */
background-color: #bf0;       /* Fully opaque shorthand */
background-color: #11ffee00;  /* Fully transparent */
background-color: #1fe0;      /* Fully transparent shorthand  */
background-color: #11ffeeff;  /* Fully opaque */
background-color: #1fef;      /* Fully opaque shorthand  */

/* RGB value */
background-color: rgb(255, 255, 128);        /* Fully opaque */
background-color: rgba(117, 190, 218, 0.5);  /* 50% transparent */

/* HSL value */
background-color: hsl(50, 33%, 25%);         /* Fully opaque */
background-color: hsla(50, 33%, 25%, 0.75);  /* 75% transparent */

/* Special keyword values */
background-color: currentcolor;
background-color: transparent;

/* Global values */
background-color: inherit;
background-color: initial;
background-color: unset;

Sử dụng hàm RGBA giúp bạn tạo ra một mầu với độ mờ (opacity). bạn có thể sử dụng mầu này làm mầu nền (background color) cho một phần tử. Độ mờ này chỉ có tác dụng với nền (background) của phần tử, nó không ảnh hưởng tới nội dung của phần tử và các phần tử con.


{background-color: rgba(76, 175, 80, 0.1);}
{background-color: rgba(76, 175, 80, 0.3);}
{background-color: rgba(76, 175, 80, 0.6);}
{background-color: rgba(76, 175, 80);}

Ví dụ, tạo một hộp gần như trong suốt chứa nội dung văn bản mô tả của một ảnh.

background-color-grba-example2.html





    CSS background-color
    
    


    

CSS background-color with GRBA function

Hướng dẫn css background-color
This is an Image

{ background-color: GRBA(76, 175, 80, 0.3); }

Xem thêm:

  • TODO Link?

3- CSS background-image

CSS background-image được sử dụng để sét một hoặc nhiều ảnh nền (background images) cho một phần tử.


div {
  padding: 5px;
  margin-top: 10px;
  border: 1px solid #ddd;
  height: 115px;
}
.bg-a {
  background-image: url('../images/bg1.png');
}
.bg-b {
  background-image: url('../images/bg2.png');
}
.bg-ab {
  background-image: url('../images/bg1.png'), url('../images/bg2.png');
}

Mỗi ảnh nền sẽ được vẽ trên một tầng trong suốt (transparent layer), các tầng này xếp chồng nên nhau.

Hướng dẫn css background-color

Hình ảnh minh họa một phần tử với sự tham gia của các thành phần: background-color, background-images, borders.

  • Viền của phần tử được vẽ trên tầng (layer) gần phía người dùng nhất.
  • Tiếp theo là các tầng để vẽ hình nền (background image), và tầng vẽ mầu nền (background color).

Syntax


background-image: none;
background-image: «image»; 
background-image: «image», «image», «image»;

none

Là một từ khóa biểu thị sự vắng mặt của hình ảnh.

«image»

Trong đó «image» có thể là một trong các hàm sau:

  • url( url-string )
  • image(  image-tags? [ image-src? , color? ] )
  • image-set( image-set-option# )
  • element( id-selectors )
  • paint(  ident ,  declaration-value )
  • cross-fade( cf-mixing-image, cf-final-image)
  • linear-gradient( [  angle  | to  side-or-corner  ]? ,  color-stop-list  )
  • repeating-linear-gradient( [  angle  | to  side-or-corner  ]? ,  color-stop-list  )
  • radial-gradient( [  ending-shape> ||  size  ]? [ at  position  ]? ,  color-stop-list )
  • repeating-radial-gradient( [  ending-shape  ||  size  ]? [ at  position  ]? ,  color-stop-list  )
  • conic-gradient( [ from  angle  ]? [ at  position  ]?,  angular-color-stop-list  )

Ví dụ:


background-image: none;

background-image: url( '../images/bg.png' );

background-image: image(ltr 'arrow.png#xywh=0,0,16,16', red);

background-image: image-set( "cat.png" 1x, "cat-2x.png" 2x, "cat-print.png" 600dpi);

background-image: element( #myElementId );

(!) paint(  ident ,  declaration-value ) ;

background-image: cross-fade( url(red.png) 33.33%, url(yellow.png) 33.33%, url(blue.png) 33.33%);

background-image: linear-gradient(red, yellow, blue);

background-image: repeating-linear-gradient(45deg, #3f87a6, #ebf8e1 15%, #f69d3c 20%);

background-image: repeating-radial-gradient(#e66465, #9198e5 20%);

background-image: conic-gradient(at 50% 50%, yellow 0deg, orange 360deg);

4- CSS background-repeat

CSS background-repeat được sử dụng để sét làm thế nào một ảnh nền được lặp lại, nó có thể được lặp lại theo phương ngang, phương thẳng đứng hoặc cả hai, hoặc không lặp lại.


/* Keyword values */
background-repeat: repeat-x;
background-repeat: repeat-y;
background-repeat: repeat;
background-repeat: space;
background-repeat: round;
background-repeat: no-repeat;

/* Two-value syntax: horizontal | vertical */
background-repeat: repeat space;
background-repeat: repeat repeat;
background-repeat: round space;
background-repeat: no-repeat round;

/* Global values */
background-repeat: inherit;
background-repeat: initial;
background-repeat: unset;

Cú pháp một giá trị là cách viết ngắn gọn cho cú pháp đầy đủ gồm hai giá trị:

Single value Two-value equivalent
repeat-x repeat no-repeat
repeat-y no-repeat repeat
repeat repeat repeat
space space space
round round round
no-repeat no-repeat no-repeat

repeat

Hình ảnh (image) sẽ được lặp lại nhiều lần, đủ để nó có thể bao phủ toàn bộ không gian của phần tử, ảnh cuối cùng có thể bị cắt xén (clip) để đảm bảo nó không bị vẽ tràn ra ngoài phần tử.

space

Hình ảnh được lặp lại càng nhiều càng tốt mà không cần cắt xén (clip). Các hình ảnh đầu tiên và cuối cùng được ghim vào hai cạnh của phần tử và khoảng trắng được phân bổ đều giữa các hình ảnh. CSS background-position được bỏ qua trừ khi chỉ có thể hiển thị một hình ảnh mà không cắt xén. Trường hợp duy nhất mà việc cắt xén xảy ra khi không gian sử dụng là khi không đủ chỗ để hiển thị một hình ảnh.

round

Các hình ảnh được lặp lại giống như {background-repeat: space}, nhưng ảnh có thể được phóng to hơn để đảm bảo không có không gian trống giữa 2 hình ảnh.

no-repeat

Hình ảnh không được lặp lại (và do đó khu vực vẽ hình nền sẽ không nhất thiết phải được che phủ hoàn toàn).

background-repeat-example.html





    CSS background-repeat
    
    
    


    

CSS background-repeat

Background Image:
Hướng dẫn css background-color

Set CSS background-repeat:

repeat-x
repeat-y
repeat
space
round
no-repeat

5- CSS background-origin

CSS background-orgin được sử dụng để sét vị trí gốc (orgin position) của ảnh nền. Nó có thể nhận một trong các giá trị sau:

  1. border-box
  2. padding-box (Default)
  3. content-box
     

Hướng dẫn css background-color

CSS {background-origin: border-box}

Hướng dẫn css background-color

CSS {background-origin: padding-box}

Hướng dẫn css background-color

CSS {background-origin: content-box}

background-origin-example.html





    CSS background-origin
    
    
    


    

CSS background-origin

Background Image:
Hướng dẫn css background-color

background-origin:

border-box
padding-box
content-box

background-repeat:

repeat-x
repeat-y
repeat
space
round
no-repeat

6- CSS background-position

CSS background-position được sử dụng để sét vị trị bắt đầu (starting position) của mỗi ảnh nền (Vị trí tương đối so với vị trí gốc (origin) ).


/* Keyword values */
background-position: top;
background-position: bottom;
background-position: left;
background-position: right;
background-position: center;

/*  values */
background-position: 25% 75%;

/*  values */
background-position: 0 0;
background-position: 1cm 2cm;
background-position: 10ch 8em;

/* Multiple images */
background-position: 0 0, center;

/* Edge offsets values */
background-position: bottom 10px right 20px;
background-position: right 3em bottom 10px;
background-position: bottom 10px right;
background-position: top right 10px;

/* Global values */
background-position: inherit;
background-position: initial;
background-position: unset;

Ví dụ:

background-position-example.html





    CSS background-position
    
    
    


    

CSS background-position

Background Image:
Hướng dẫn css background-color

background-position:

top
bottom
left
right
center
left top
left bottom
bottom 10px right
bottom 10px right 20px
...

background-origin:

border-box
padding-box
content-box

background-repeat:

repeat-x
repeat-y
repeat
space
round
no-repeat

background-position-example.js


function setBgPosition(value) {
   var myElement = document.getElementById("my-div");
   myElement.style.backgroundPosition = value;
}
function setBgOrigin(value) {
   var myElement = document.getElementById("my-div");
   myElement.style.backgroundOrigin = value;
}
function setBgRepeat(value) {
   var myElement = document.getElementById("my-div");
   myElement.style.backgroundRepeat = value;
}

CSS background-position chấp nhận cú pháp 1 giá trị, 2 giá trị, 3 giá trị hoặc 4 giá trị.

1-value syntax

CSS background-position trong cú pháp 1 giá trị (1-value syntax) chấp nhận các giá trị sau:

  • center
  • left, top, right, bottom
  • 10px, 5cm, 20%,...


/* Keyword values */
background-position: top;
background-position: bottom;
background-position: left;
background-position: right;
background-position: center;

/*  values */
background-position: 25% 75%;

/*  values */
background-position: 0;
background-position: 1cm;
background-position: 10ch;

2-value syntax

CSS background-position trong cú pháp 2 giá trị (2-value syntax) chấp nhận các giá trị sau:

Value Same As
left top top left
left bottom bottom left
right top top right
right bottom bottom right
10px 20cm  
10% 20px  
...  

Chú ý: Trong cú pháp 2 giá trị (2-value syntax), nếu bạn cung cấp một giá trị không hợp lệ nó sẽ bị bỏ qua bởi trình duyệt. Chẳng hạn CSS {background-position: left left} là một giá trị không hơp lệ.

3-value syntax

Cú pháp 3 giá trị (3-value syntax) là sự mở rộng của cú pháp 2 giá trị. Bạn có thể hiểu hơn về nó thông qua hình minh họa dưới đây:

Hướng dẫn css background-color


/* Edge offsets values */

background-position: bottom 10px right;
background-position: top right 10px;

4-value syntax

Cú pháp 4 giá trị (4-value syntax) là sự mở rộng của cú pháp 2 giá trị. Bạn có thể hiểu hơn về nó thông qua hình minh họa dưới đây:

Hướng dẫn css background-color


/* Edge offsets values */
background-position: bottom 10px right 20px;
background-position: right 3em bottom 10px;

7- CSS background-size

  • TODO