与我一起学css3:background-size,-clip

前言

大家好,今天与大家一起学习分享css3中的background-size,background-clip使用与实践。

知识点讲解

background-size

一般情况下,我们设置的背景图与背景为完全匹配,但也有情况是可能不匹配的,或者大或者小,那么当尺寸不匹配时,你希望如何控制尺寸呢?这就是background-size的价值所在。

可能取值:px|percentage|cover|contain,详细说明如下:

取值

说明

px

设置背景图像的宽度和高度,如果只设置一个,第二个被认为auto

percentage

设置背景图像的宽度和高度,如果只设置一个,第二个被认为auto

contain

缩放背景图像,让其能显示完整

cover

缩放其图像,让其能完全覆盖区域,但可能背景显示不全

  • 兼容性:ie9+以及现代浏览器

background-clip

背景裁剪一般用于控制其背景的显示策略,显示覆盖区域,常规默认是覆盖全部也就是border-box的。

可能取值:padding-box|content-box|border-box,与box-sizing一致的取值范围。

  • 兼容性:ie9+以及现代浏览器

代码实践

场景讲解

在下面的实践中我们主要实现一个全屏背景中的注册窗,效果有以下几点是需要完成的: – 背景全屏效果 – 背景模糊效果 – 注册窗水平垂直居中 – 注册表格内容与边框之间有透明背景映射

方案讲解

  • 背景全屏效果:background-size:cover;
  • 背景模糊效果,用filter:blur(10px)实现.其他的有兴趣的可以百度css3 filter ,查看菜鸟教程或者w3c介绍。 其语法如下:filter: none | blur() | brightness() | contrast() | drop-shadow() | grayscale() | hue-rotate() | invert() | opacity() | saturate() | sepia() | url();
  • 注册窗水平垂直居中用绝对定位加margin修正(略)
  • 背景裁剪,background-clip:content-box;

代码方案

<div class="mask">
</div>  
<form class="m-login">
       <h2>立即注册</h2>
</form> 
<style>
*{
  margin:0;
  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>

效果图

代码案例地址

参考文档

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏DannyHoo的专栏

设置导航栏的背景色和标签栏的背景色

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/u010105969/article/details/...

25120
来自专栏分享达人秀

最简单最常用的LinearLayout线性布局

良好的布局设计对于UI界面至关重要,在前面也简单介绍过,目前Android中的布局主要有6种,创建的布局文件默认为RelativeLayout相对布局,...

30480
来自专栏Java帮帮-微信公众号-技术文章全总结

03.HTML头部/CSS/图像/表格/列表

03.HTML头部/CSS/图像/表格/列表 HTML <head> 查看在线实例 <title> - 定义了HTML文档的标题 使用 <title> 标签定义...

1.2K90
来自专栏企鹅号快讯

css层叠样式表

CSS概述 CSS(Cascading Style Sheets的缩写),翻译为“层叠样式表”或者“级联样式表”,简称样式表 主要作用 为了让网页元素的样式更加...

423110
来自专栏超然的博客

响应式图像

将picture元素和srcset,sizes属性纳入html5规范,新规范意在解决:

7710
来自专栏lonelydawn的前端猿区

keyframes在不同浏览器中的表现性

一、keyframes的使用方法 keyframes是css3实现动画的一种方式。 简单的使用规则如下: 先定义元素的动画样式,并设置动画的名称 selecto...

38860
来自专栏web开发

img标签实现和背景图一样的显示效果——object-fit和object-position

不知大家在做前端页面的时候,有没有遇到类似这样的问题:有一个不是正方形的图片,可能是宽度大于高度的,也可能是高度大于宽度的,而你又并不想用背景图的方式来做,要实...

41760
来自专栏HTML5学堂

前端特效开发 | 图片翻转的制作

HTML5学堂(码匠):在前端开发中,针对效果层面的开发,使用原生JS往往会因其冗长的代码严重影响到开发进度。比如一个简单的图片翻转效果,我们能否考虑借助某些简...

54670
来自专栏我的博客

关于html中map标签的看法和总结

先说前言吧,前些日子一直在做一个项目开发没空来写博客~~今天遇到一个很棘手的问题。就是一个相对于图片定位热区和div的问题 要求: 1、把一个图片分隔成很多矩形...

34650
来自专栏十月梦想

移动端适配之viewport适配

前面说过了比例缩放适配,本来想直接介绍rem适配!还是补充一下这个viewport适配吧!其实这个viewport也归属于比例缩放适配的一种吧!

13410

扫码关注云+社区

领取腾讯云代金券