Css3: background-size,background-clip

preface

Hello, everyone. Today, WE are going to learn and share the use and practice of BACKground-size and background-clip in CSS3.

Knowledge point explanation

background-size

In general, we set the background to exactly match the background, but there are also cases where the background may not match, either large or small, so when the size does not match, how do you want to control the size? That’s the value of background-size.

Possible value: px | percentage with | cover | contain, details are as follows:

• Compatibility: IE9 + and modern browsers

background-clip

Background clipping is generally used to control the display strategy of its background, showing the coverage area, and the general default is to cover all, that is, the border-box.

Possible values: padding – box | content – box | border – box, box – sizing and consistent value range.

• Compatibility: IE9 + and modern browsers

Code practice

Scene interpretation

In the following practice, we mainly achieve a full-screen background of the registration window, the effect has the following points are needed to complete:

• Background full screen effect
• Background Blur effect
• The registration window is centered horizontally and vertically
• There is a transparent background mapping between the registry content and the border

Plan on

• Background full screen effect: background-size:cover;
• For the background blur effect, use filter:blur(10px). Other interested can baidu CSS3 filter, check the rookie tutorial or W3C introduction. The syntax is as follows: filter: none | blur() | brightness() | contrast() | drop-shadow() | grayscale() | hue-rotate() | invert() | opacity() | saturate() | sepia() | url();
• Registration window horizontal vertical center fixed with absolute positioning plus margin
• Clipping background, background-clip:content-box;

The code scheme

<! In particular, since the filter effect affects the child elements, we use a separate mask style element for the background layer --> <div class="mask">
</div>  
<form class="m-login"< span style> *{margin:0; max-width: 100%; padding:0; border:none; box-sizing:border-box; } html,body{ height:100%; } .mask{ height:100%; background:url(https://study.miaov.com/img/pc/remote_chapter/bannerBg.png) no-repeat center; background-size:cover; position:relative; filter: blur(6px); } .m-login{ position:absolute; width:500px; height:250px; border-radius:10px; border:1px solid#fff;
  top:50%;
  left:50%;
  margin-top:-100px;
  margin-left:-250px;
  padding:5px;
  background:#fff;
  background-clip:content-box;
  font-size:14px;
  h2{
    text-align:center;
    line-height:40px;
  }
}
</style>
Copy the code

rendering

Code case address

• Code case

Reference documentation

• w3c background-size