详解CSS3新增的背景属性


Posted in HTML / CSS onDecember 25, 2019

先前,再css里面我们知道background的几个属性color,image,repeat,attachment,position,这些都是我们再css里面常用的,那么css3新增的属性有哪些呢?往下看:

**

CSS3新增属性:background-clip ,background-origin , background-size

1.background-clip

背景的剪裁属性,是从指定位置开始绘制。

**

**

2.background-origin

background-Origin属性指定了背景图像的位置区域。

** 上面两个的属性值都是border-box, padding-box , content-box(这里建议要对盒子模型有足够了解,那么在这里就看这3个属性值就一清二楚了),或者看下图:

详解CSS3新增的背景属性

background-clip就是相当于再这3个位置的哪个地方开始裁剪,来达到其相应的效果,看代码

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <style>
    #div1 {
      border: 20px dashed blue;
      padding:40px;
      background: red;
    }

    #div2{
      border: 20px dashed blue;
      padding:40px;
      background: red;
      background-clip: padding-box;
    }

    #div3{
      border: 20px dashed blue;
      padding:40px;
      background: red;
      background-clip: content-box;
    }
  </style>
</head>
<body>

<p>没有背景剪裁 (border-box没有定义):</p>
<div id="div1 ">
  <h2>Lorem Ipsum Dolor</h2>
  <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam uam erat volutpat.</p>
</div>

<p>background-clip: padding-box:</p>
<div id="div2">
  <h2>Lorem Ipsum Dolor</h2>
  <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam uam erat volutpat.</p>
</div>

<p>background-clip: content-box:</p>
<div id="div3">
  <h2>Lorem Ipsum Dolor</h2>
  <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam uam erat volutpat.</p>
</div>
</body>
</html>

效果图:

详解CSS3新增的背景属性详解CSS3新增的背景属性

而background-origin则是再那个区域显示背景,看代码

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <style>
    div
    {
      border:1px solid black;
      padding:35px;
      background-image:url('1 (5).jpg');/*图片显示不出来需要自己去更改*/
      background-repeat:no-repeat;
      background-position:left;
    }
    #div1 {
      background-origin: border-box;/*设置padding-box效果一样,可以自己去试试*/
    }
    #div2 {
      background-origin: content-box;
    }
  </style>
</head>
<body>
<p>背景图像边界框的相对位置</p>
<div id="div1">
  <h2>Lorem Ipsum Dolor</h2>
  <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam uam erat volutpat.</p>
</div>
<p>背景图像的相对位置的内容框</p>
<div id="div2">
  <h2>Lorem Ipsum Dolor</h2>
  <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam uam erat volutpat.</p>
</div>
</body>
</html>

效果:

详解CSS3新增的背景属性

**

3.background-size

background-size指定背景图像的大小。CSS3以前,背景图像大小由图像的实际大小决定。CSS3中background-size让我们重新在不同的环境中指定背景图片的大小。您可以指定像素或百分比大小。你指定的大小是相对于父元素的宽度和高度的百分比的大小。

其属性值:

①.length设置背景图片高度和宽度。第一个值设置宽度,第二个值设置的高度。如果只给出一个值,第二个是设置为 auto(自动)

②.lpercentage将计算相对于背景定位区域的百分比。第一个值设置宽度,第二个值设置的高度。如果只给出一个值,第二个是设置为"auto(自动)"

③.cover此时会保持图像的纵横比并将图像缩放成将完全覆盖背景定位区域的最小大小。

④.contain此时会保持图像的纵横比并将图像缩放成将适合背景定位区域的最大大小。

总结

以上所述是小编给大家介绍的CSS3新增的背景属性,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!

HTML / CSS 相关文章推荐
Web页面中八种创建多列等高(等高列布局)的实现技术
Dec 24 HTML / CSS
css3高级选择器使用方法
Dec 02 HTML / CSS
纯CSS3实现的8种Loading动画效果
Jul 05 HTML / CSS
CSS3实现超酷的黑猫警长首页
Apr 26 HTML / CSS
CSS实现聊天气泡效果
Apr 26 HTML / CSS
css3实现背景模糊的三种方式(小结)
May 15 HTML / CSS
IE9对HTML5中部分属性不支持的原因分析
Oct 15 HTML / CSS
HTML5 video标签(播放器)学习笔记(一):使用入门
Apr 24 HTML / CSS
推荐10个HTML5响应式框架
Feb 25 HTML / CSS
能用CSS实现的就不要麻烦JavaScript了
Oct 05 HTML / CSS
什么是clearfix (一文搞清楚css清除浮动clearfix)
May 21 HTML / CSS
CSS3实现缺角矩形,折角矩形以及缺角边框
Dec 20 #HTML / CSS
css3实现背景动态渐变效果
Dec 10 #HTML / CSS
css3动画 小球滚动 js控制动画暂停
Nov 29 #HTML / CSS
CSS3实现酷炫的3D旋转透视效果
Nov 21 #HTML / CSS
CSS实现半透明边框与多重边框的场景分析
Nov 13 #HTML / CSS
CSS3 新增选择器的实例
Nov 13 #HTML / CSS
CSS3制作轮播图的一种方法
Nov 11 #HTML / CSS
You might like
js生成随机数之random函数随机示例
2013/12/20 Javascript
jQuery中DOM树操作之使用反向插入方法实例分析
2015/01/23 Javascript
浅谈jQuery中replace()方法
2015/05/13 Javascript
jquery实现Ctrl+Enter提交表单的方法
2015/07/21 Javascript
JavaScript九九乘法口诀表的简单实现
2016/10/04 Javascript
详解使用Node.js 将txt文件转为Excel文件
2017/07/05 Javascript
es7学习教程之Decorators(修饰器)详解
2017/07/21 Javascript
nodejs body-parser 解析post数据实例
2017/07/26 NodeJs
BACKBONE.JS 简单入门范例
2017/10/17 Javascript
Vue + better-scroll 实现移动端字母索引导航功能
2018/05/07 Javascript
vue + element-ui的分页问题实现
2018/12/17 Javascript
微信小程序系列之自定义顶部导航功能
2019/05/21 Javascript
vue实现带过渡效果的下拉菜单功能
2020/02/19 Javascript
vue2路由方式--嵌套路由实现方法分析
2020/03/06 Javascript
解决ant-design-vue中menu菜单无法默认展开的问题
2020/10/31 Javascript
[04:27]2014DOTA2国际邀请赛 NAVI战队官方纪录片
2014/07/21 DOTA
[42:39]老党炸弹人试玩视频
2014/09/03 DOTA
跟老齐学Python之永远强大的函数
2014/09/14 Python
基于进程内通讯的python聊天室实现方法
2015/06/28 Python
Python减少循环层次和缩进的技巧分析
2016/03/15 Python
Python中的with语句与上下文管理器学习总结
2016/06/28 Python
Python通过Pygame绘制移动的矩形实例代码
2018/01/03 Python
python实现飞机大战微信小游戏
2020/03/21 Python
对Python生成器、装饰器、递归的使用详解
2019/07/19 Python
将python文件打包exe独立运行程序方法详解
2020/02/12 Python
使用Python实现微信拍一拍功能的思路代码
2020/07/09 Python
python如何实现word批量转HTML
2020/09/30 Python
关于老式浏览器兼容HTML5和CSS3的问题
2016/06/01 HTML / CSS
天美时手表加拿大官网:Timex加拿大
2016/09/01 全球购物
总经理秘书的岗位职责
2013/12/27 职场文书
生物学专业求职信
2014/07/23 职场文书
交警正风肃纪剖析材料
2014/10/29 职场文书
第二批党的群众路线教育实践活动个人整改方案
2014/10/31 职场文书
党员群众路线学习心得体会
2014/11/04 职场文书
德生2P3收音机开箱评测
2022/04/30 无线电
postgresql之greenplum字符串去重拼接方式
2023/05/08 PostgreSQL