专栏首页达摩兵的技术空间与我一起学css3:background-size,-clip

与我一起学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 条评论
登录 后参与评论

相关文章

  • 当JSON.parse”遇上”非键值对

    在json大行其道并作为前后端主要通讯的数据格式之一时,对json本身的使用和了解多少人都会有些概念,当然随之而来的也是对json的对象以及其字符串形式的互相转...

    RobinsonZhang
  • 动态内容的等高布局实现

    首先不同内容的固定高度等高布局没有任何难度,本文讲的不是这种。本文讲的是,不同行级或者浮动元素具有不定高度时,将其他元素的高度填充为最大高度元素的高度这种场景。

    RobinsonZhang
  • 以jq为案例查看外观模式

    套餐服务–外观模式,属于大类结构型设计模式的一种,通常是为一组复杂的子系统接口提供一个更高级的统一接口,通过这个接口让使用者对子系统的接口更加容易访问。

    RobinsonZhang
  • 发现Chrome 浏览器 JavaScript Date对象的几个Bug

    修改个文档,还限制字数。。。凑字数凑字数凑字数凑字数凑字数凑字数凑字数凑字数凑字数凑字数凑字数凑字数凑字数凑字数凑字数凑字数凑字数凑字数凑字数凑字数凑字数凑字数...

    KurtNiu
  • 我的个人微信公众号

    congduan
  • 语音翻译api无法在线调试

    用户5798902
  • flask session安全问题

    那我们就可以把session理解为cookie中名称为session的一对键值,且是加密的。

    Jumbo
  • Phpshell Bypass Safedog

    (php的function介绍可以看这里:http://www.php.net/manual/zh/functions.user-defined.php)

    Jumbo
  • Golang Leetcode 728. Self Dividing Numbers.go

    更多内容请移步我的repo:https://github.com/anakin/golang-leetcode

    anakinsun
  • QQ浏览器小程序开发制作指南

    12 月 5 日,QQ浏览器小程序宣布,实现与微信小程序打通。QQ 浏览器 Android 版现已上线小程序,在搜索的场景下,小程序嵌入 QQ 浏览器「搜索直达...

    夏末浅笑

扫码关注云+社区

领取腾讯云代金券