详解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 相关文章推荐
CSS3中使用RGBa来调节透明度的教程
May 09 HTML / CSS
CSS中的字体大小设置属性总结
May 24 HTML / CSS
css3 pointer-events 介绍详解
Sep 18 HTML / CSS
html5 canvas 画图教程案例分析
Nov 23 HTML / CSS
简单的HTML5初步入门教程
Sep 29 HTML / CSS
HTML5中meta属性的使用方法
Feb 29 HTML / CSS
利用HTML5 Canvas制作键盘及鼠标动画的实例分享
Mar 15 HTML / CSS
详解移动端HTML5页面端去掉input输入框的白色背景和边框(兼容Android和ios)
Dec 15 HTML / CSS
h5实现获取用户地理定位的实例代码
Jul 17 HTML / CSS
html2canvas截图空白问题的解决
Mar 24 HTML / CSS
关于canvas.toDataURL 在iOS运行失败的问题解决
Sep 16 HTML / CSS
CSS3实现360度循环旋转功能
Feb 12 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
PHP字符编码问题之GB2312 VS UTF-8解决方法
2011/06/23 PHP
php简单实现MVC
2015/02/05 PHP
PHP使用递归方式列出当前目录下所有文件的方法
2015/06/02 PHP
javascript 动态调整图片尺寸实现代码
2009/12/28 Javascript
jquery 操作表格实现代码(多种操作打包)
2011/03/20 Javascript
关于javaScript注册click事件传递参数的不成功问题
2014/07/18 Javascript
JavaScript设计模式之策略模式实例
2014/10/10 Javascript
JavaScript中的无阻塞加载性能优化方案
2014/10/10 Javascript
javascript继承机制实例详解
2014/11/20 Javascript
JS实现仿微博可关闭弹出层效果
2015/09/21 Javascript
利用JQuery阻止事件冒泡
2016/12/01 Javascript
angular.js+node.js实现下载图片处理详解
2017/03/31 Javascript
基于Bootstrap table组件实现多层表头的实例代码
2017/09/07 Javascript
浅谈使用mpvue开发小程序需要注意和了解的知识点
2018/05/23 Javascript
Vue实现页面添加水印功能
2019/11/09 Javascript
JS实现长图上下滚动效果
2020/03/19 Javascript
webpack 如何同时输出压缩和未压缩的文件的实现步骤
2020/06/05 Javascript
electron踩坑之remote of undefined的解决
2020/10/06 Javascript
Python实现网站文件的全备份和差异备份
2014/11/30 Python
复习Python中的字符串知识点
2015/04/14 Python
python实用代码片段收集贴
2015/06/03 Python
Flask框架学习笔记之消息提示与异常处理操作详解
2019/08/15 Python
PYcharm 激活方法(推荐)
2020/03/23 Python
Windows下Anaconda和PyCharm的安装与使用详解
2020/04/23 Python
Django 5种类型Session使用方法解析
2020/04/29 Python
html5 canvas简单封装一个echarts实现不了的饼图
2018/06/12 HTML / CSS
美国知名的百货清仓店:Neiman Marcus Last Call
2016/08/03 全球购物
Pop In A Box英国:Funko POP搪胶公仔
2019/05/27 全球购物
安德玛加拿大官网:Under Armour加拿大
2019/10/02 全球购物
上海某公司.net方向笔试题
2014/09/14 面试题
工作试用期自我评价
2015/03/10 职场文书
升职自荐信范文
2015/03/27 职场文书
财务总监岗位职责范本
2015/04/03 职场文书
市语委办2016年第十九届“推普周”活动总结
2016/04/05 职场文书
经典人生语录分享:不畏将来,不念过去,笑对当下
2019/12/12 职场文书
MySQL索引 高效获取数据的数据结构
2022/05/02 MySQL