博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
CSS3background新增属性
阅读量:4693 次
发布时间:2019-06-09

本文共 754 字,大约阅读时间需要 2 分钟。

1. background-size

    background-size: cover || contain. 该属性可以是背景图片铺满容器,前者适用于当背景图片原始尺寸小于容器大小,后者适用于图片尺寸大于容器。

2. background-clip 

  取值 : border-box || padding-box || content-box

    需要注意的是 background在Box Model中,他是布满整个元素的Box区域的,并不是从padding内部开始,只不过边框部分遮住了部分background;backgground-color是从左border的左上角到右侧border的右下角,而background-image则是从左侧padding       的左上角到右侧border的右下角。,而webkit下background-clip还有一个更神奇的效果,就是可以让图片填充文本,那就是background-clip:text配合其私有属性-webkit-text-fill-color

    

在前面的基础上,我们把样式换一下

.text {      font-size: 40px;      text-transform: uppercase;      -webkit-background-clip: text;      -webkit-text-fill-color: transparent;   }

效果:

3. background-orgin

   决定背景图片的起始点。

 

如果background-attachment为fixed的话,background-orign将不会起作用。

  

转载于:https://www.cnblogs.com/ssyz1988/p/3741685.html

你可能感兴趣的文章
C primer Plus 作业第四章
查看>>
mysql函数大全
查看>>
Rectangle
查看>>
刷题向》关于搜索+tarjan的奇怪组合题 BZOJ1194 (normal+)
查看>>
AC自动机模板
查看>>
排序二叉树的基本操作
查看>>
Wechat login authorization(OAuth2.0)
查看>>
安装virtualbox须知
查看>>
mui集成百度ECharts的统计图表以及清空释放图表
查看>>
Duplicate entry '' for key 'PRIMARY'
查看>>
传奇脚本中 SendMsg 编号说明
查看>>
Javascript 严格模式详解
查看>>
普林斯顿算法课Part2第四周作业_Boggle
查看>>
AspNetPager分页控件的使用以及常见错误
查看>>
(博弈) bzoj 2460
查看>>
常用类的课后作业
查看>>
JAVA的动态代理
查看>>
立体图
查看>>
【收藏】纯CSS画的基本图形(矩形、圆形、三角形、多边形、爱心、八卦等)...
查看>>
动态为表添加字段
查看>>