详解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个性化字体_动力节点Java学院整理
Jul 12 HTML / CSS
CSS3 calc()会计算属性详解
Feb 27 HTML / CSS
利用CSS3实现文本框的清除按钮相关的一些效果
Jun 23 HTML / CSS
详解CSS3中Media Queries的相关使用
Jul 17 HTML / CSS
CSS3中Animation属性的使用详解
Aug 06 HTML / CSS
html5本地存储_动力节点Java学院整理
Jul 12 HTML / CSS
html5的localstorage详解
May 09 HTML / CSS
html5各种页面切换效果和模态对话框用法总结
Dec 15 HTML / CSS
通过HTML5 Canvas API绘制弧线和圆形的教程
Mar 14 HTML / CSS
详解H5 活动页之移动端 REM 布局适配方法
Dec 07 HTML / CSS
CSS作用域(样式分割)的使用汇总
Nov 07 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版
2012/04/20 PHP
解析php 版获取重定向后的地址(代码)
2013/06/26 PHP
php 发送带附件邮件示例
2014/01/23 PHP
ThinkPHP打开验证码页面显示乱码的解决方法
2014/12/18 PHP
JavaScript下申明对象的几种方法小结
2008/10/02 Javascript
SharePoint 客户端对象模型 (一) ECMA Script
2011/05/22 Javascript
js编码之encodeURIComponent使用介绍(asp,php)
2012/03/01 Javascript
JavaScript与DOM组合动态创建表格实例
2012/12/23 Javascript
javascript标签在页面中的位置探讨
2013/04/11 Javascript
详细介绍8款超实用JavaScript框架
2013/10/25 Javascript
javascript获取元素CSS样式代码示例
2013/11/28 Javascript
JavaScript中length属性的使用方法
2015/06/05 Javascript
javascript删除数组重复元素的方法汇总
2015/06/24 Javascript
详解JS中的柯里化(currying)
2017/08/17 Javascript
JavaScript实现无限级递归树的示例代码
2019/03/29 Javascript
layui点击弹框页面 表单请求的方法
2019/09/21 Javascript
js实现开关灯效果
2020/03/30 Javascript
js实现随机抽奖
2020/03/19 Javascript
JavaScript 实现自己的安卓手机自动化工具脚本(推荐)
2020/05/13 Javascript
python实现读取并显示图片的两种方法
2017/01/13 Python
Django项目使用CircleCI的方法示例
2019/07/14 Python
Python使用百度翻译开发平台实现英文翻译为中文功能示例
2019/08/08 Python
Django中ajax发送post请求 报403错误CSRF验证失败解决方案
2019/08/13 Python
python3的数据类型及数据类型转换实例详解
2019/08/20 Python
Python 解码Base64 得到码流格式文本实例
2020/01/09 Python
HTML5跳转小程序wx-open-launch-weapp的示例代码
2020/07/16 HTML / CSS
Kipling凯浦林美国官网:世界著名时尚休闲包袋品牌
2016/08/24 全球购物
eBay法国购物网站:eBay.fr
2017/10/21 全球购物
人力资源经理的岗位职责范本
2014/02/28 职场文书
报纸媒体创意广告词
2014/03/17 职场文书
12岁生日演讲稿
2014/05/14 职场文书
cf战队收人口号
2014/06/21 职场文书
乡镇四风对照检查材料
2014/08/31 职场文书
研究生简历自我评价范文
2014/09/13 职场文书
Python Django模型详解
2021/10/05 Python
mysql5.7的安装及Navicate长久免费使用的实现过程
2021/11/17 MySQL