Thiết lập nền background-size, background-clip CSS

Posted on by mtoplistChuyên mục:Top List

Thiết lập tô nền với các thuộc tính trong CSS là background-size, background-clip

background-size

Thuộc tính background-size cho phép chỉ ra kích thước của các ảnh nền, sử dụng đơn vị chiều dài hoặc phần trăm.

 <style>
    div.exam1 {
        height: 150px;
        width: 200px;
        background: url("https://xuanthulab.net/public/img/logo.png") 
            no-repeat 50% 50%;
        background-color: orangered;
        background-size: 120px;
    }
</style>

<div class="exam1"></div>

background-size còn có thể nhận hai giá trị contain hoặc cover

contain : co ảnh vừa với phần tử chứa.

<style>
    div.exam2 {
        height: 150px;
        width: 200px;
        background: url("https://xuanthulab.net/public/img/logo.png")
        no-repeat 50% 50%;
        background-color: orangered;
        background-size: contain;
    }
</style>

<div class="exam2"></div>

background-size: cover; ảnh được co để vừa với phần tử chứa, tuy nhiên ảnh bị cắt nếu kích thước không cùng tỷ lệ với phần tử chứa.


<style>
    div.exam3 {
        height: 150px;
        width: 200px;
        background: url("https://xuanthulab.net/public/img/logo.png")
        no-repeat 50% 50%;
        background-color: orangered;
        background-size: cover;
    }
</style>

<div class="exam3"></div>

background-clip

Thuộc tính background-clip chỉ ra vùng vẽ của nền. Nó có thể nhận các giá trị:

  • border-box mặc định, nền vẽ ngoài biên viền.
  • padding-box nền vẽ cả ở vùng padding (không viền)
  • content-box nền chỉ vẽ ở vùng nội dung phần tử
<style>
    #default {
        border: 5px dotted black;
        padding: 20px;
        background: LightBlue;
        background-clip: border-box;
    }
    #first {
        border: 5px dotted black;
        padding: 20px;
        background: LightBlue;
        background-clip: padding-box;
    }
    #second {
        border: 5px dotted black;
        padding: 20px;
        background: LightBlue;
        background-clip: content-box;
    }
</style>

<div id="default">background-clip: border-box; (default)</div>
<br>
<div id="first">background-clip: padding-box;</div>
<br>
<div id="second">background-clip: content-box;</div>

background-clip: border-box; (default)

background-clip: padding-box;

background-clip: content-box;

Cỡ ảnh nềnbackground-clipĐĂNG KÝ KÊNH, XEM CÁC VIDEO TRÊN XUANTHULAB

Đăng ký nhận bài viết mới

mtoplist