3、灵活的背景定位

作者: Elevens_regret | 来源:发表于2017-03-31 17:12 被阅读0次

插入背景图时，为了保证图片与盒子边距有一定的距离，可以直接使用background-position属性的扩展语法，可以直接在位置关键字后加上偏移量。

background: yellowgreen url("about_env_a.png") no-repeat right 20px bottom 20px;

偏移量的位置是数值，还支持CSS的calc计算。

background: yellowgreen url("about_env_a.png") no-repeat calc(100% - 20px) calc(100% - 20px); // 与第一条效果相同

也可以直接使用background-origin属性，定义背景图的渲染位置，可以设置此属性为centent-box，让背景图在内容盒子的内部（贴合内边距）进行渲染。

background: yellowgreen url("about_env_a.png") no-repeat right  bottom;
background-origin: content-box; // 与第一条效果相同

3、灵活的背景定位
插入背景图时，为了保证图片与盒子边距有一定的距离，可以直接使用background-position属性的扩展语法...
灵活的背景定位
background-position的扩展语法方案background-position属性允许我们制定背景图片...
day01
1.边框透明 2.背景的绘制区域 3.多重边框 4.双重边框 5.灵活的背景定位（background-posit...
css 中多种背景（应用）的实现小技巧与运用
一、灵活的背景定位背景知识：background-position，background-origin，calc...
背景与边框之“灵活的背景定位”
设计场景针对元素的某个角对背景图片做偏移定位希望图片和元素的边角之间能留出一定的空隙，类似内边距的效果 bac...
CSS 灵活的背景定位（三种方案）
1.background-position 方案它允许我们指定背景图像距离任意角的偏移量，只要我们在偏移量前面指...
CSS3 背景
知识点： CSS3 背景图像区域CSS3 背景图像定位CSS3 背景图像大小CSS3 多重背景图像CSS3 背景属...
一些有趣的css3用法
1.灵活的背景定位方法一：calc() 请不要忘记在 calc() 函数内部的 - 和 + 运算符的两侧各加 ...
web学习:03-CSS3背景与渐变
1.CSS3背景 1.1 背景图像区域 1.2 背景图形定位 //cover 布局不会有留白 2.CSS3 渐变 ...
竞品分析报告
灵活安排突出重点一、分析背景二、竞品对象三、竞品分析 3.1 定位和功能 3.2 设计和技术 3.3 运营...

网友评论

本文标题：3、灵活的背景定位

本文链接：https://www.haomeiwen.com/subject/amvuottx.html

3、灵活的背景定位