详解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画一个阴阳八卦图
Mar 09 HTML / CSS
需要知道的CSS3动画技术
Jan 01 HTML / CSS
HTML5 Web 存储详解
Sep 16 HTML / CSS
html5嵌入内容_动力节点Java学院整理
Jul 07 HTML / CSS
HTML5 File接口在web页面上使用文件下载
Feb 27 HTML / CSS
HTML5样式控制示例代码
Nov 27 HTML / CSS
利用HTML5 Canvas制作一个简单的打飞机游戏
May 11 HTML / CSS
详解HTML5中的manifest缓存使用
Sep 09 HTML / CSS
h5调用摄像头的实现方法
Jun 01 HTML / CSS
利用Storage Event实现页面间通信的示例代码
Jul 26 HTML / CSS
web字体加载方案优化小结
Nov 29 HTML / CSS
flex布局中使用flex-wrap实现换行的项目实践
Jun 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
php中mysql连接方式PDO使用详解
2015/02/25 PHP
解决ThinkPHP关闭调试模式时报错的问题汇总
2015/04/22 PHP
原生javascript实现图片轮播效果代码
2010/09/03 Javascript
关于js注册事件的常用方法
2013/04/03 Javascript
javascript使用isNaN()函数判断变量是否为数字
2013/09/21 Javascript
javascript图片相似度算法实现 js实现直方图和向量算法
2014/01/14 Javascript
js选择并转移导航菜单示例代码
2014/08/19 Javascript
利用jquery制作滚动到指定位置触发动画
2016/03/26 Javascript
javascript函数的四种调用模式
2017/01/08 Javascript
深入理解Angular4中的依赖注入
2017/06/07 Javascript
详解Vue单元测试case写法
2018/05/24 Javascript
JavaScript语法约定和程序调试原理解析
2020/11/03 Javascript
vue实现一个获取按键展示快捷键效果的Input组件
2021/01/13 Vue.js
跟老齐学Python之关于循环的小伎俩
2014/10/02 Python
Python实现telnet服务器的方法
2015/07/10 Python
Python中max函数用于二维列表的实例
2018/04/03 Python
python实时获取外部程序输出结果的方法
2019/01/12 Python
Python替换月份为英文缩写的实现方法
2019/07/15 Python
python飞机大战pygame游戏背景设计详解
2019/12/17 Python
python 追踪except信息方式
2020/04/25 Python
Django扫码抽奖平台的配置过程详解
2021/01/14 Python
html5通过canvas实现刮刮卡效果示例分享
2014/01/27 HTML / CSS
激光脱毛、蓝光和护肤:Tria Beauty
2019/03/28 全球购物
NYX Professional Makeup英国官网:美国平价专业彩妆品牌
2019/11/13 全球购物
俄罗斯家居用品购物网站:Евродом
2020/11/21 全球购物
继承时候类的执行顺序问题,一般都是选择题,问你将会打印出什么?
2015/11/18 面试题
校园十佳歌手策划书
2014/01/22 职场文书
敬老模范事迹
2014/05/21 职场文书
统计专业自荐书
2014/07/06 职场文书
超市周年庆活动方案
2014/08/16 职场文书
新兵入伍心得体会
2014/09/04 职场文书
优秀工作者事迹材料
2014/12/26 职场文书
golang 比较浮点数的大小方式
2021/05/02 Golang
pytorch交叉熵损失函数的weight参数的使用
2021/05/24 Python
用Python selenium实现淘宝抢单机器人
2021/06/18 Python
Win10加载疑难解答时出错发生意外错误的解决方法
2022/07/07 数码科技