CSS3: Sửa Kích Thước ảnh Nền - V1Study

• Đào tạo Độ tuổi từ 5 - 11 Độ tuổi từ 12 - 17 Từ 18 tuổi
• Lập trình Python Lập trình C C++ Java C# - C Sharp Android Scratch Pascal Robot mBot
• Web ReactJS HTML5 CSS3 JavaScript Node.js JSP ASP.NET Core jQuery PHP
• FW-CMS Laravel AngularJS Flutter Magento Bootstrap VueJS CodeIgnitor WordPress Sass Drupal
• Video Video Python Video Lập trình C Video C# Video Java Video HTML5-CSS3-JavaScript Video SQL Server Video PHP Video jQuery Video Android Video C++ Video Scratch
• Video1 Video XML-JSON Video MySQL Video Excel Video Giải thuật và Lập trình Video Sức khỏe Video Drupal Video mBot Video Giáo dục - Khoa học
• Other Unity Giải thuật và lập trình Giải thuật và lập trình - C CCNA Mạng máy tính Design Patterns English Facebook SEO Git Tin học đại cương Japanese App-Uti Download
• Data SQL Server XML JSON MySQL
• News

≡ ≡ CSS3 Hướng dẫn Giới thiệu CSS Giới thiệu CSS3 Cú pháp Vị trí đặt CSS CSS: white-space-collapse CSS: width Đơn vị kích thước Tối ưu hoá code CSS Bo góc với border-radius Tạo bóng với box-shadow Bao ảnh với border-image Sửa kích thước ảnh nền linear-gradient thẳng góc linear-gradient chéo góc linear-gradient tuỳ chỉnh repeating-linear-gradient() radial-gradient() repeating-radial-gradient() transform 2D transform 3D Animation (Hoạt ảnh) Các thuộc tính áp dụng được hiệu ứng hoạt họa (animation) hoặc transition Ưu tiên (!important) Cách dùng background Cách dùng font Cách dùng text Giả mã cho thẻ <a> Class & ID CSS cho <Span> & <Div> Cách dùng border Cách dùng width và height Cách dùng float và clear Cách dùng position Cách tạo đường thẳng nhiều màu :contains() CSS3 Cách tạo chân đường link Flex Container Flex Item Flex Responsive Cách xoay ảnh khi chạm chuột vào dùng CSS3 Thuộc tính CSS: alignment-adjust CSS: alignment-baseline appearance CSS: azimuth backface-visibility CSS: background CSS: background-attachment CSS: background-clip CSS: background-color CSS: background-image CSS: background-origin CSS: background-position CSS: background-repeat CSS: baseline-shift border CSS: border-bottom CSS: border-bottom-color CSS: border-bottom-style CSS: border-bottom-width CSS: border-collapse CSS: border-color CSS: border-image CSS: border-image-outset CSS: border-image-repeat CSS: border-image-slice CSS: border-image-source CSS: border-image-width CSS: border-left CSS: border-left-color CSS: border-left-style CSS: border-left-width CSS: border-right CSS: border-right-color CSS: border-right-style CSS: border-right-width CSS: border-spacing CSS: border-style CSS: border-top CSS: border-top-color CSS: border-top-style CSS: border-top-width CSS: border-width CSS: bottom CSS: box-decoration-break CSS: break-after CSS: break-inside CSS: caption-side CSS: clear CSS: clip CSS: color CSS: column-count CSS: column-fill CSS: column-gap CSS: column-rule CSS: column-rule-color CSS: column-rule-style CSS: column-rule-width CSS: column-span CSS: column-width CSS: content CSS: counter-increment CSS: counter-reset CSS: crop CSS: cue CSS: cue-after CSS: cue-before CSS: cursor CSS: direction display CSS: dominant-baseline CSS: drop-initial-after-adjust CSS: drop-initial-after-adjust CSS: drop-initial-after-align CSS: drop-initial-before-adjust CSS: drop-initial-before-align CSS: drop-initial-size CSS: drop-initial-value CSS: elevation CSS: empty-cells CSS: float CSS: font CSS: font-family CSS: font-size CSS: font-size-adjust CSS: font-stretch CSS: font-style font-variant CSS: font-weight CSS: grid-columns CSS: grid-rows CSS: hanging-punctuation CSS: height CSS: icon CSS: inline-box-align CSS: left CSS: letter-spacing CSS: line-height CSS: line-stacking CSS: line-stacking-ruby CSS: line-stacking-shift CSS: line-stacking-strategy CSS: list-style CSS: list-style-image CSS: list-style-position CSS: list-style-type margin CSS: margin-bottom CSS: margin-left CSS: margin-right CSS: margin-top CSS: marker-offset CSS: marks CSS: marquee-direction CSS: marquee-play-count CSS: marquee-speed CSS: marquee-style CSS: max-height CSS: max-width CSS: min-height CSS: min-width CSS: nav-down CSS: nav-index CSS: nav-left CSS: nav-right CSS: nav-up CSS: opacity CSS: orphans CSS: outline CSS: outline-color CSS: outline-offset CSS: outline-style CSS: outline-width CSS: overflow CSS: overflow-style CSS: padding CSS: padding-bottom CSS: padding-left CSS: padding-right CSS: padding-top CSS: page CSS: page-break-after CSS: page-break-before CSS: page-break-inside CSS: pause CSS: pause-after CSS: pause-before CSS: perspective CSS: perspective-origin CSS: pitch CSS: pitch-range CSS: play-during CSS: position CSS: punctuation-trim CSS: quotes CSS: resize CSS: richness CSS: right CSS: ruby-align CSS: ruby-overhang CSS: ruby-position CSS: ruby-span CSS: size CSS: speak CSS: speak-header CSS: speak-numeral CSS: speak-punctuation CSS: speech-rate CSS: src CSS: stress CSS: table-layout padding CSS: text-align-last CSS: text-decoration CSS: text-emphasis CSS: text-height CSS: text-indent CSS: text-justify CSS: text-outline text-align CSS: text-wrap CSS: top CSS: unicode-bidi CSS: unicode-range CSS: vertical-align CSS: visibility CSS: voice-family CSS: volume text-transform CSS: word-break CSS: word-spacing white-space CSS: z-index box-sizing transition columns word-wrap border-collapse text-indent CSS Tham khảo Lưu ý khi thiết kế đáp ứng với CSS Cách cấm bôi đen, copy bằng CSS Trì hoãn phần CSS không quan trọng Tạo tam giác với CSS3 CSS3: Sửa kích thước ảnh nền Khóa học qua video: Lập trình Python All Lập trình C# All SQL Server All Lập trình C Java PHP HTML5-CSS3-JavaScript Đăng ký Hội viên Tất cả các video dành cho hội viên

Thuộc tính background-size của CSS3 cho phép chỉnh sửa kích thước ảnh nền của trang web theo ý của bạn một cách rất đơn giản mà không cần phải chỉnh sửa kích thước ảnh bằng công cụ chuyên dụng.

Trình duyệt hỗ trợ

IE9+, FireFox, Chrome, Safari và Opera đều hỗ trợ hai thuộc tính background-size.

background-size cho phép bạn xác định kích thước của ảnh nền. Bạn có thể sử dụng đơn vị là pixel (px) hay đơn vị là phần trăm (%) cho kích thước của ảnh nền thông qua thuộc tính background-size, nếu bạn sử dụng đơn vị là % thì kích thước của ảnh nền sẽ phụ thuộc vào độ rộng và độ cao của phần tử chứa nó.

Cú pháp

background-size: [Rộng] [Cao];

Hoặc:

background-size: [Rộng];

, trong đó nếu chỉ có giá trị độ rộng mà không có độ cao thì độ cao sẽ tự được được xác định theo tỷ lệ tương ứng với độ rộng.

Ví dụ 1: Ví dụ này sẽ dùng ảnh làm nền trong đó đơn vị của kích thước là px.

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<style>

#d1{

width:900px;

height:300px;

border:green thin solid;

background:url(https://lh4.googleusercontent.com/-mNwW2oSwNk4/UxdgRFc0TfI/AAAAAAAAARk/PvY72Wz8jOI/w140-h104-p/css3-logo.jpg);

background-size:259px 194px;

background-repeat:no-repeat;

padding-top:40px;

color:red;

}

</style>

</head>

<body>

<div id="d1">

<p>CSS3 nằm gọn trong lòng bàn tay bạn!</p>

</div>

</body>

</html>

Ví dụ 2: Ví dụ này tương tự như ví dụ trên nhưng đơn vị của kích thước ảnh nền là %.

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<style>

#d1{

width:900px;

height:300px;

border:green thin solid;

background:url(https://lh4.googleusercontent.com/-mNwW2oSwNk4/UxdgRFc0TfI/AAAAAAAAARk/PvY72Wz8jOI/w140-h104-p/css3-logo.jpg);

background-size:50%;

background-repeat:no-repeat;

padding-top:40px;

color:red;

}

</style>

</head>

<body>

<div id="d1">

<p>CSS3 nằm gọn trong lòng bàn tay bạn!</p>

</div>

</body>

</html>

» Tiếp: linear-gradient thẳng góc « Trước: Bao ảnh với border-image Khóa học qua video: Lập trình Python All Lập trình C# All SQL Server All Lập trình C Java PHP HTML5-CSS3-JavaScript Đăng ký Hội viên Tất cả các video dành cho hội viên Khóa học qua video: Lập trình Python All Lập trình C# All SQL Server All Lập trình C Java PHP HTML5-CSS3-JavaScript Đăng ký Hội viên Tất cả các video dành cho hội viên Copied !!! Copy linkCopied link!

Bạn muốn tìm kiếm điều gì?

×