Hướng dẫn css background image print - css ảnh nền in

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.
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ã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. Facebook Facebook

7- CSS background-size

TODO 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

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à: đượ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;

2- CSS background-color 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);}

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

background-color-grba-example2.html

    
    
    


    
CSS background-color with GRBA function
    

       

       

          This is an Image
       
    
    

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

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.

• 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.

Xem thêm:

TODO Link? đượ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');
}

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ử. background-color, background-images, borders.

• 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ì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.

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

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

none

Là một từ khóa biểu thị sự vắng mặt của hình ảnh. «image» có thể là một trong các hàm sau:

• «image»( url-string )
• Trong đó «image» có thể là một trong các hàm sau: (  image-tags? [ image-src? , color? ] )
• url( url-string )( image-set-option# )
• image(  image-tags? [ image-src? , color? ] )( id-selectors )
• image-set( image-set-option# )(  ident ,  declaration-value )
• element( id-selectors )( cf-mixing-image, cf-final-image)
• paint(  ident ,  declaration-value )( [  angle  | to  side-or-corner  ]? ,  color-stop-list  )
• cross-fade( cf-mixing-image, cf-final-image)( [  angle  | to  side-or-corner  ]? ,  color-stop-list  )
• linear-gradient( [  angle  | to  side-or-corner  ]? ,  color-stop-list  )( [  ending-shape> ||  size  ]? [ at  position  ]? ,  color-stop-list )
• repeating-linear-gradient( [  angle  | to  side-or-corner  ]? ,  color-stop-list  )( [  ending-shape  ||  size  ]? [ at  position  ]? ,  color-stop-list  )
• radial-gradient( [  ending-shape> ||  size  ]? [ at  position  ]? ,  color-stop-list )( [ 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);

repeating-radial-gradient( [  ending-shape  ||  size  ]? [ at  position  ]? ,  color-stop-list  )

conic-gradient( [ from  angle  ]? [ at  position  ]?,  angular-color-stop-list  ) đượ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;

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.	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ử. 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.

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. {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
    Background Image:
    
 

    
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: đượ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) (Default)
3. content-box  
    

CSS {background-origin: border-box}

CSS {background-origin: padding-box}

CSS {background-origin: content-box}

background-origin-example.html

    
    
    
    


    
CSS background-origin
    Background Image:
    
 

    

      
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) ). đượ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

     {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);}

0

background-position-example.js

     {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);}

1

CSS background-position chấp nhận cú pháp 1 giá trị, 2 giá trị, 3 giá trị hoặc 4 giá trị. 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: 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%,...

     {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);}

2

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: 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
10% 20px

10% 20px CSS {background-position: left left} là một giá trị không hơp lệ.

...

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ệ.

     {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);}

3

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:

     {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);}

4

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: