专栏首页python3CSS3 Background 属性介绍

CSS3 Background 属性介绍

与border类似,ie对新的background属性都是不支持的。多的就不说了,来看看,新的background 属性吧。

1、background-origin  控制背景图片区域 三个取值,由外向内分别为: border-box,padding-box,content-box 默认为padding-box

<style type="text/css"> <!-- .bg-origin { width:250px; border:20px dotted #000; padding:20px; position:relative; text-align:center; font-weight:bold; color:#f00;  background:#ccc url(img/logo.png) no-repeat; background-origin:content-box;  } span.bg-padding { position:absolute;top:0; } div.bg-content { height:80px; border:1px solid #000; } --> </style> <div class="bg-origin"> <span class="bg-padding">padding</span> <div class="bg-content">content</div> </div> 

效果如图

2、background-clip  控制背景图区域,将控制区域外的背景裁切 三个取值,由外向内分别为: border-box,padding-box,content-box 默认取值为border-box

<style type="text/css"> <!-- .bg-clip { width:250px; border:20px dotted #000; padding:20px; position:relative; text-align:center; font-weight:bold; color:#f00;  background:#ccc url(img/logo.png) no-repeat;  background-clip:content-box;  } span.bg-padding { position:absolute;top:0; } div.bg-content { height:80px; border:1px solid #000; } --> </style> <div class="bg-clip"> <span class="bg-padding">padding</span> <div class="bg-content">content</div> </div> 

效果如图:

3、background-size  控制背景图片大小,拉伸控制图片 以像素或百分比控制,基于Gecko引擎的火狐浏览器目前尚不支持

<style type="text/css"> <!-- .bg-size { border: 1px solid #CCCCCC; padding:90px 5px 10px;  background:url(img/logo.png) no-repeat ;  -webkit-background-size: 100% 80px;  -o-background-size: 100% 80px; } --> </style> <div class="bg-size">这里的<code>background-size: 100% 80px</code> 背景图片将与DIV一样宽,高为80px。</div> 

谷歌浏览器下效果:

4、Multiple backgrounds background 包含一下子属性  background-p_w_picpath : 指定或检索对象的背景图像。  background-origin : 指定背景的显示区域。参见background-origin  background-clip : 指定背景的裁剪区域。参见background-clip  background-repeat : 设置或检索对象的背景图像是否及如何重复铺排。  background-size : 指定背景图片的大小。参见background-size  background-position : 设置或检索对象的背景图像位置。  CSS3手册中有如下介绍:

CSS3中在容器的多层背景,各子属性与逗号来分隔值,如果指定的值,如下: background-p_w_picpath: w1, w2, w3,…, wM background-repeat: x1, x2, x3,…, xR background-size: y1, y2, y3,…, yS background-position: s1, s2, s3,…, sP  

各个控制数值一一对应 这边以一个简单的上下左右控制的综合背景图为例

<style type="text/css"> <!-- .mult-bg { background-p_w_picpath: url(img/bgt.png),url(img/bgr.png),url(img/bgb.png),url(img/bgl.png);  background-position: center top, right center, center bottom,left center; background-repeat:repeat-x,repeat-y,repeat-x,repeat-y;width:260px;padding:20px; } --> </style>  <div class="mult-bg"><p>多背景示范容器</p></div> 

所用的背景图:

效果如图:

还是由于当前的兼容问题,在做美化的过程中,要尽量做到平稳过度

虽说标准尚未出台,不过先熟悉熟悉总是好事 :-)

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • css续集3

    py3study
  • 爬虫——实战完整版

    py3study
  • Python math模块

    math模块的函数如下: 0,常量 math.pi         π = 3.141592... math.e          e = 2.7...

    py3study
  • skewX()

    Html5知典
  • CSS实现背景图片右侧定位的5种小技巧

    说到背景图片右侧定位,大家一定会想到使用background-position属性来实现。

    歪马
  • 移动端下拉刷新上拉加载-mescroll.js插件

    最近无意间看到有这么一个上拉刷新下拉加载的插件 —— mescroll.js,个人感觉挺好用的,官网地址是:http://www.mescroll.com 然后...

    用户1174387
  • 【第一季】Vue2.0内部指令

    学习这套课程你需要的前置知识: HTML的基础知识,你需要达到中级水平,写前端页面的结构代码完全没有问题。 CSS的基础知识,最好做过半年以上的切图和布局,最...

    用户1212940
  • 揭秘新科图灵奖得主Hinton、LeCun、Bengio的传奇人生

    导读:2019年3月27日,ACM(国际计算机学会)宣布,三位“深度学习之父”约书亚·本吉奥(Yoshua Bengio)、杰弗里·辛顿(Geoffrey Hi...

    华章科技
  • Leetcode: Reverse Integer

    Example1: x = 123, return 321 Example2: x = -123, return -321 题目提示: Have ...

    卡尔曼和玻尔兹曼谁曼
  • 使用strace分析exp的奇怪问题(r3笔记第41天)

    exp算是一个经典的数据导出工具了。对于小数量的表来说,个人还是比较钟爱exp。毕竟expdp还需要配置directory而且还在服务端。exp在数据量小的情况...

    jeanron100

扫码关注云+社区

领取腾讯云代金券