CSS3有哪些新增的背景属性

给大家总结归纳一些css的背景属性,以及css3有哪些新增的背景属性。

background:

  background-color:背景颜色

  background-color:背景图片

  background-color:背景重复

立即学习“前端免费学习笔记(深入)”;

  background-color:背景定位

  background-color:背景固定/fixed)

background-size  背景尺寸

  background-size:x y

  background-size:100% 100%

  background-size:cover 比例放大

 background-size:contain 包含(图片不溢出)

多背景

       background:url() 0 0,url() 0 100%;

background-color  背景区域定位

       border-box: 从border区域开始显示背景。

   padding-box: 从padding区域开始显示背景。

   content-box: 从content内容区域开始显示背景。

background-clip   背景绘制区域

   border-box: 从border区域向外裁剪背景。

   padding-box: 从padding区域向外裁剪背景。

   content-box: 从content区域向外裁剪背景。

   text:背景填充文本//不 支持的

   no-clip: 从border区域向外裁剪背景。

颜色渐变

       线性渐变:-webkit-linear-gradient(起点/角度,颜色 位置,…,)

      起点:left/top/right/bottom/left top…… 默认top

      角度:逆时针方向 0-360度

      颜色 位置:red 0, blue 50%,yellow 100%(红色从50%渐变到100%为蓝色)

颜色渐变

repeating-linear-gradient  线性渐变重复平铺

       IE低版本渐变(滤镜):

  filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=’#ffffff’,endColorstr=’#ff0000′,GradientType=’1′);

颜色渐变

       径向渐变:radial-gradient(起点(圆心位置), 形状/半径/大小,颜色1,颜色2)

      起点:left/top/right/bottom或具体值/百分比

      形状:ellipse(椭圆)、circle(正圆)

        大小:具体数值或百分比,也可以是关键字(closest-side(最近端), closest-corner(最近角), farthest-side(最远端), farthest-corner(最远角), contain(包含) ,cover(覆盖));

注:firefox目前只支持关键字

关于背景的CSS属性就这么多了,更多精彩请关注【创想鸟】其它相关文章!

相关阅读:

background-color

background-color

background-color

以上就是CSS3有哪些新增的背景属性的详细内容,更多请关注【创想鸟】其它相关文章!

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至253000106@qq.com举报,一经查实,本站将立刻删除。

发布者:PHP中文网,转转请注明出处:https://www.chuangxiangniao.com/p/3121454.html

(0)
上一篇 2025年3月29日 17:51:19
下一篇 2025年2月19日 04:00:59

AD推荐 黄金广告位招租... 更多推荐

相关推荐

  • 怎么用CSS3媒体查询

    css3的媒体查询功能,使得媒体查询得以实现,其实基本原理还是用css3媒体查询(media/meta)功能查出设备的尺寸,然后写出不同的尺寸写出或者覆盖css样式,使得界面看起来变换了。接下来就和大家说一下怎么用css3媒体查询。 esp…

    编程技术 2025年3月29日
    000
  • CSS3常用的几种选择器

    在20世纪90年代初html诞生后,在96年底就有css诞生了,css是专门定义网页的基本属性的,那么在css3中,常用的选择器有哪些?今天就给大家介绍一下。 HTML的诞生 20世纪90年代初 1996年底,    CSS第一版诞生 19…

    编程技术 2025年3月29日
    100
  • CSS3自适应全屏焦点图切换的特效怎么做

    给大家带来用纯CSS3实现全屏背景切换焦点图效果,不参夹JS的代码,简单易懂还好用,需要的朋友可以直接搬运。下面我们来看一下 nbsp;html>                                            …

    编程技术 2025年3月29日
    100
  • css3怎么做幻灯片切换动画效果

    这次教大家的是怎样用css3做出幻灯片的切换动画效果,幻灯片的切换动画效果在很多情况下都可以用得到,今天就给大家一份幻灯片的切换动画效果的操作案例 nbsp;html>    html5 幻灯片切换动画                …

    编程技术 2025年3月29日
    100
  • css3怎么实现图片封面展示的动画

    给大家做一个小案例,如何css3怎么实现封面展示的。图片封面展示在很多情景下可以用到,比如产品展示页面等。 nbsp;html>    css3图片封面展示动画                                     …

    编程技术 2025年3月29日
    100
  • CSS3怎么制作蝴蝶飞舞的动画

    css3怎么制作蝴蝶飞舞的动画?蝴蝶飞舞的动画效果是什么样的?css3制作蝴蝶飞舞的动画需要注意哪些方面?今天给大家用css3做一个蝴蝶飞舞的动画。 nbsp;html>  CSS3制作蝴蝶飞舞动画       body{ backg…

    编程技术 2025年3月29日
    100
  • css3点击显示涟漪特效

    css3点击显示涟漪特效,怎样用css3做出点击显示涟漪特效,点击显示涟漪的特效需要注意哪些方面?下面给大家做一个案例. nbsp;html>    css3点击出现不同颜色涟漪特效       /* NOTE: The styles…

    编程技术 2025年3月29日
    100
  • CSS的编码怎么转换

    css的编码怎么转换?为什么要转换css文件编码?css的文件编码怎么设置?css的文件编码为什么要转换?今天我们就给大家详细介绍一下 CSS编码转换 CSS文件编码设置篇,CSS文件utf-8与gb2312互转换方法篇 查看CSS文件编码…

    编程技术 2025年3月29日
    100
  • 怎么用CSS3做出灯光照射显示文字动画

    有时候我们需要做这么一种特效,用灯光照射,然后显示文字动画,那么今天我们就来给大家带来灯光照射显示文字动画的源码 nbsp;html>    CSS3 实现灯光照射显示文字动画                   5iweb.com.…

    编程技术 2025年3月29日
    100
  • 利用CSS3怎么做出不规则图片的切换特效制作

    给大家带来一份源码,用css3怎么做出不规则图片的切换特效制作,有需要的朋友可以拿去用一下。 nbsp;html>TweenMax不规则图片切换特效  const TWO_PI = Math.PI * 2; var images = …

    编程技术 2025年3月29日
    100

发表回复

登录后才能评论