前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >CSS3 Background 属性介绍

CSS3 Background 属性介绍

作者头像
py3study
发布2020-01-14 17:16:23
6930
发布2020-01-14 17:16:23
举报
文章被收录于专栏:python3

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

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

代码语言:javascript
复制
<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

代码语言:javascript
复制
<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引擎的火狐浏览器目前尚不支持

代码语言:javascript
复制
<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手册中有如下介绍:

代码语言:javascript
复制
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  

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

代码语言:javascript
复制
<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> 

所用的背景图:

效果如图:

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

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

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2019/07/07 ,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
相关产品与服务
容器服务
腾讯云容器服务(Tencent Kubernetes Engine, TKE)基于原生 kubernetes 提供以容器为核心的、高度可扩展的高性能容器管理服务,覆盖 Serverless、边缘计算、分布式云等多种业务部署场景,业内首创单个集群兼容多种计算节点的容器资源管理模式。同时产品作为云原生 Finops 领先布道者,主导开源项目Crane,全面助力客户实现资源优化、成本控制。
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档