CSS揭秘：3.灵活的背景定位

已于 2023-08-03 17:58:08 修改
阅读量269 收藏
点赞数
分类专栏： css样式 文章标签： 背景定位 calc css
于 2020-06-12 00:38:06 首次发布
本文为博主原创文章，未经博主允许不得转载！转载请注明出处。[进入个人博客 Eighteen Blog](https://www.zsfmyz.top)
本文链接：https://blog.csdn.net/lunhui1994_/article/details/106699349
版权

文章目录

灵活的背景定位

背景知识：background-position的扩展语法，background-origin，calc()

1. background-position扩展语法

  1. background-position扩展语法： css3 中background-position 语法可以通过在偏移量前指定关键字，来设置四条边的偏移量。
    background-positon: right 20px bottom 10px;

2. background-origin

  1. background-origin： css3 中 background-origin 可以指定背景图片的显示范围，默认以padding-box为准，即padding的外边沿。此时背景图片的位置将和padding一致。通常此方案更适合开发需求。
    padding:20px;
background-origin: content-box;
background-position: 100% 100%;

3. calc()

  1. calc()： 允许填入 任意 + - * / 四则运算组合的表达式。
    background-position: calc(100% - 20px) calc(100% - 10px);

扩展：border-box 边框的外边沿；padding-box 内边距的外边沿； content-box 内容的外边沿。

原效果

在这里插入图片描述

最终效果

在这里插入图片描述
下一篇：CSS揭秘：4.边框内圆角

相关阅读

Eighteen Z
关注
专栏目录
css揭秘--3灵活的背景定位
weixin_44580139的博客
11-26 250
灵活的背景定位 文章目录灵活的背景定位难题 难题 在针对容器的某个角对背景图片
CSS揭秘：5.条纹背景（上）
Eighteen Z
07-03 597
条纹背景 背景知识：CSS线性渐变，background-size CSS线性渐变 background: linear-gradient(red, yellow, blue); background: linear-gradient(red 0%, yellow 50%, blue 100%); background: linear-gradient(to right, red 0%, yellow 50%, blue 100%); background: linear-gradien
CSS揭秘：5.条纹背景（下）
Eighteen Z
07-08 566
上篇文章讲述了实现条纹效果所使用的CSS特性并实现了水平和垂直条纹，接下来我们来实现斜向条纹。 回忆一下之前的效果 水平条纹 background: linear-gradient(#fb3 33%, #58a 0, #58a 66%, yellowgreen 0); background-size: 100% 60px; 垂直条纹 background: linear-gradient(90deg, #fb3 33%, #58a 0, #58a 66%, yellowgreen 0); backgro
CSS揭秘：6.复杂的背景图案（上）
Eighteen Z
09-21 660
文章目录前言一、网格1. 网格 First Try总结相关阅读 前言 上一篇文章中我们学会了如何使用渐变实现条纹状的背景，但是实际上条纹背景并不是我们能实现的唯一的背景图案，利用渐变我们可以实现很多更为复杂的图案，本篇会介绍一些其他的简单而实用的背景图案。 提示：以下是本篇文章正文内容，下面案例可供参考 一、网格 网格的原理其实很简单，目前我们已经实现了条纹背景，那么如果我们将条纹背景组合呢？互相穿插组合，那么是不是很简单就实现了各种各样的网格背景。 1. 网格 First Try 代码如下： wi
CSS揭秘：6.复杂的背景图案（下）
Eighteen Z
02-26 381
文章目录前言一、网格Svgsvgcss小结相关阅读 前言 上一篇文章中我们学会了如何使用实现棋盘背景的方法，但是显而易见的代码量是比较多的。那么怎么可以优化代码量，降低维护成本呢？ 一、网格Svg 我们可以看到下面的代码，其实内容是比较多的。如果要修改格子的尺寸或者颜色，要同时修改好几个地方。当然我们可以通过scss或者less等工具提取变量简化代码，但是代码量依然很多。 width:200px; height:200px; background: #eee; background: #e
CSS揭秘：4.边框内圆角
Eighteen Z
06-19 2510
边框内圆角 背景知识：box-shadow，outline，“多重边框” 一、两个div嵌套 两个div实现内圆角很容易，只需要内圆角外直角即可。 div First Try .box{ width: 200px; padding: 20px; background-color: #655; } .content{ background-color: tan; border-radius: .8em; paddi
CSS揭秘：2.多重边框
Eighteen Z
06-11 527
多重边框 背景知识：box-shadow的基本用法，outline基本用法 /* x偏移量 | y偏移量 | 阴影模糊半径 | 阴影扩散半径 | 阴影颜色 */ box-shadow: 2px 2px 2px 1px rgba(0, 0, 0, 0.2); 以上是box-shadow的基本参数。box-shadow是为元素添加阴影效果的样式。但是我们可以通过对其属性的设置，呈现边框效果。 box-shadow 方案 First Try 将x偏移量 ，y偏移量设置为0px，此时阴影会在元素下面不会超
CSS揭秘:背景与边框（3）~灵活的背景定位
qq_43480829的博客
12-23 157
灵活的背景定位 难题 如果想要针对容器某个角对背景图片做偏移定位。如右下角，在CSS2.1中，我们只能指定距离左上角的偏移量，或者直接完全靠齐到其他三个角。但是，我们有时希望图片和容器的边角之间能留出一定的空隙（类似内边距的效果），以免得到如图效果： 对于具有固定尺寸的容器来说，使用CSS2.1来做到这一点事可能的，但很麻烦，基于它自身的尺寸以及我们期望它距离右下角的偏移量，计算出背景图片距离左...
html背景定位方式,CSS揭秘之《灵活的背景定位》
weixin_39672572的博客
06-07 103
针对容器某个角对背景图片做偏移定位现在就假设想针对容器右下角右侧20px偏移，底部10px偏移有如下几种方式1、原理设置透明边框div {background: url(../images/code-pirate.svg) no-repeat 100% 100% #58a;border-right: 20px solid transparent;border-bottom: 10px solid ...
【CSS揭秘】案例3、灵活的背景定位
袅袅青烟散的博客
09-20 218
background-position定义和用法background-position 属性设置背景图像的起始位置。 如：background-position: right 20px bottom 10px;详细参考http://www.w3school.com.cn/cssref/pr_background-position.aspbackground-origin定义和用法 backgrou
文本图片垂直水平居中显示
热门推荐
Eighteen Z
01-17 13万+
文字居中 垂直居中（vertical-align） 我们都知道有这么一个属性可以让图片，文本等在元素中垂直居中 vertical-align:middle; vertical-align值有很多，常用的就是middle，bottom，text-bottom等，我们先说middle。 vertical-align时而没效果 然而真实使用的时候，我们会发现这个属性“时灵时不灵”...
字体和font-family对照表
Eighteen Z
05-30 7万+
windows常见内置中文字体 字体中文名 字体英文名 字体应用 ...
table的td宽度控制
Eighteen Z
07-19 2万+
前言：td在我们有具体宽度控制的时候显的格外难以驯服，但是知道了它的原理，解决起来就不会再怕了。。 首先table的宽度我们可以设置，具体的px或者百分比，浏览器会自动按比例给td分配宽度。 <table style="width: 600px;border-collapse: collapse;" > <tr> <td style=...
CSS实验：linear-gradient 详解及实践
Eighteen Z
11-16 1万+
文章目录前言一、 介绍示例小结二、场景用法1. 四角边框背景2.读入数据总结 前言 本文想要介绍一些linear-gradient的更多实用性比较强的用法，前面有根据CSS揭秘总结的讲线性渐变实现条纹背景的方法。 CSS揭秘：5.条纹背景（上） 一、 介绍 示例 background: linear-gradient(red, yellow, blue); background: linear-gradient(red 0%, yellow 50%, blue 100%); back
网页p标签两端文案对齐
Eighteen Z
10-13 5532
text-align:justify!important;废话不多说上属性 加在p标签上就可以。文本两边对齐
CSS3：图片的高斯模糊效果
Eighteen Z
05-18 5051
CSS3：图片的高斯模糊效果 最近项目中需要预览视频中加马赛克的效果（高斯模糊），于是找到了css3的一个属性filter来进行高斯模糊 filter（滤镜） 可以用来定义图片或者div的饱和度，模糊程度，亮度等一系列。具体参考 CSS3：filter 属性 兼容性 兼容性方案 //高斯模糊 -webkit-filter：blur(10px); fi...
border-radius失效了？
Eighteen Z
08-29 2943
欢迎 Eighteen blog - border-radius失效了？ 今天涉及两个属性： overscroll: scroll-y / scroll-x / scroll; border-radius: 10px; 原本这两个属性是没有什么联系的，但是当同时出现在同一个元素上时，就会发生圆角效果被滑动条覆盖的情况。 例如： <style> div { border-r...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

Eighteen Z

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值