Danh Mục Bài Viết
Tiếp theo mình sẽ đề cập đến một thuốc tính rất hay sử dụng trong Css đó là Background. Bài viết này sẽ đề cập đến các khái niệm như background-color, background-image, background-repeat, background-attachment, background-position, opacity, Rgba và cách viết gọn các thuộc tính. Nào Let's go thôi
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-color: lightblue;
}
</style>
</head>
<body>
<h1>Minacode!</h1>
<p>Chia sẻ kiến thức lập trình miễn phí!</p>
</body>
</html>Ta có:
Thuộc tính opacity chỉ định độ mờ/độ trong suốt của một thẻ. Nó có thể nhận giá trị từ 0,0 - 1,0. Giá trị càng thấp thì càng mờ nhé.
<!DOCTYPE html>
<html>
<head>
<style>
div {
background-color: green;
}
div.first {
opacity: 0.1;
}
div.second {
opacity: 0.3;
}
div.third {
opacity: 0.6;
}
</style>
</head>
<body>
<h1>Minacode-opacity</h1>
<div class="first">
<h1>Độ mờ 0.1</h1>
</div>
<div class="second">
<h1>Độ mờ 0.3</h1>
</div>
<div class="third">
<h1>Độ mờ 0.6</h1>
</div>
<div>
<h1>Độ mờ 1 (mặc định)</h1>
</div>
</body>
</html>Ta có:
Lưu ý: Khi sử dụng thuộc tính opacity để thêm độ trong suốt cho background của một thẻ, tất cả các thẻ con của nó đều kế thừa độ trong suốt như nhau. Điều này có thể làm cho văn bản bên trong thẻ hoàn toàn trong suốt khó đọc.
Nếu bạn không muốn áp dụng độ mờ cho các thẻ con, như trong ví dụ của minacode ở trên, hãy sử dụng các giá trị màu RGBA . Ví dụ sau đây đặt độ mờ cho màu nền chứ không phải cho văn bản:
<!DOCTYPE html>
<html>
<head>
<style>
div {
background: rgb(0, 128, 0);
}
div.first {
background: rgba(0, 128, 0, 0.1);
}
div.second {
background: rgba(0, 128, 0, 0.3);
}
div.third {
background: rgba(0, 128, 0, 0.6);
}
</style>
</head>
<body>
<h1>Minacode-Độ mờ</h1>
<p>Sử dụng opacity:</p>
<div style="opacity:0.1;">
<h1>10% opacity</h1>
</div>
<div style="opacity:0.3;">
<h1>30% opacity</h1>
</div>
<div style="opacity:0.6;">
<h1>60% opacity</h1>
</div>
<div>
<h1>opacity 1</h1>
</div>
<p>Sử dụng rgba():</p>
<div class="first">
<h1>10% opacity</h1>
</div>
<div class="second">
<h1>30% opacity</h1>
</div>
<div class="third">
<h1>60% opacity</h1>
</div>
<div>
<h1>default</h1>
</div>
<p>Các bạn có thấy sự khác biệt khi chúng ta sử dụng opacity và rgba .</p>
</body>
</html>Tac có:
Thuộc tính background-image chỉ định một hình ảnh để sử dụng làm nền của một thẻ. Theo mặc định, hình ảnh được lặp lại (repeat) để bao phủ toàn bộ thẻ.
Ví dụ:
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-image: url("https://minacode.net/public/frontend/images/minacode.png");
}
</style>
</head>
<body>
<h1>Minacode-Background-Image!</h1>
<p>Trang này minacode sử dụng ảnh logo để làm background!</p>
</body>
</html>Ta có:
Nếu không muôn lặp lại chúng ta có thể sử dụng:
background-repeat: no-repeat;Hoặc có thể chỉ định chiều repeat:
Nếu hình trên chỉ được lặp lại theo chiều ngang background-repeat: repeat-x;, Để lặp lại hình ảnh theo chiều dọc, hãy đặt background-repeat: repeat-y;
Thuộc tính background-position được dùng để để xác định vị trí của hình nền
Vì dụ để đặt hình nền ở góc trên bên phải:
body {
background-image: url("https://minacode.net/public/frontend/images/minacode.png");
background-repeat: no-repeat;
background-position: right top;
}Ta có:
Tương tự các bạn có thể set cho nó ở các position khác như center; left..
Thuộc tính background-attachment sẽ chỉ định xem hình nền của chúng ta sẽ cuộn hay được cố định khi chúng ta scroll con chuộn (sẽ không cuộn cùng với phần còn lại của trang):
background-attachment: fixed;
background-attachment: scroll;Các bạn thử và kiểm tra luôn nhé! Đây cũng là một thuộc tính khá hay giúp tăng trải nghiệm người dùng
Để rút ngắn code. Chúng ta có thể viết tất cả thuộc tính từ đầu đến giờ trên cùng một dòng.
Thay vì viết:
body {
background-color: #ffffff;
background-image: url("logo.png");
background-repeat: no-repeat;
background-position: right top;
}Ta có thể viết:
body {
background: #ffffff url("logo.png") no-repeat right top;
}Khi sử dụng trên cùng một dòng, thứ tự của các giá trị thuộc tính là:
Sẽ không có vấn đề gì nếu thiếu một trong các giá trị thuộc tính trên, miễn là các giá trị khác vẫn theo thứ tự này.
>>Còn tiếp>>
.png)
.png)
-min.png)
Banker To Coder
Hi All,
Nguyên đây! MinaCode là website mình tạo ra với mong muốn chia sẻ chút kiến thức liên quan đến lập trình FullStack.
Ngôn ngữ lập trình chủ yếu được sử dụng là Htm, Css, Javascript, Php cùng một số thư viện như Jquery, Fontawesome... Phía Frontend và Farmework Laravel phía Backend.
Mình chưa bao giờ tham gia bất cứ một trường lớp nào về lập trình. Tất cả kiến thức mình chia sẻ đều là trên tình thần tự học. Do đó:
+ MinaCode phù hợp với những tay ngang, xem lập trình như là một kỹ năng bổ trợ trong công việc hay là một kênh kiếm thêm thu nhập từ những very mini projects.
+ MinaCode không phù hợp với những bạn đang được đào tạo bài bản, chính quy.
Mình tin rằng, Trong tương lai không xa. Lập trình sẽ trở nên một kỹ năng không thể thiếu đối với các bạn trẻ.
Cuối cùng thì Ngôn ngữ lập trình không quan trọng bằng Tư duy lập trình. Mình chúc các bạn sẽ có được những kiến thức bổ ích với MinaCode.
--Ngô Sỹ Nguyên--
.png)
