前言：

　　　　所有实例均来自《CSS揭秘》，该书以平时遇到的疑难杂症为引，提供解决方法，只能说秒极了，再一次刷新了我对CSS的认知

　　　该书只提供了关键CSS代码，虽然有在线示例代码链接，但访问速度较慢。下面示例代码是我自己写的，若有错误，欢迎指正

　　　注：我会在最开头附上每个相关示例所需CSS属性链接作为补充，以供查阅和学习

　　　　　我会在每个示例最后附上书中提供的在线示例代码链接；

　　　　　我会从书中选择一些css技巧来分享，有兴趣的小伙伴可以去看看这本书，你不会失望的

　　CSS需知：

　　　　background-position

　　场景：

　　　　　现在有一个需求让你把下图箭头所指的背景图片放到右下角的位置，你会怎么办呢？如下图

　　　　　

　　　　　可能聪明的你马上会想到用 background-position:right bottom; 属性

　　　　 补充：background-position:0 0 或 0% 0% 表示把背景图片设置到左上角，100% 100% 表示右下角；

　　　　　　　 如果只设置其中一个值，另一个值则默认是50%（相当于设置为center）；默认值为 0% 0%

　　　　

　　　　

　　　　　这样虽然能解决问题，但需求变成让你把该背景图片向右边缘且跟底边偏移 20px，是否会让你觉得有些头痛呢，如下图

　　　　　

　　 background-position扩展语法方案： 

　　　　它允许我们指定背景图片距离任意角的偏移量，只要我们在偏移量前面指定关键字

　　　　

　　　

　　　　

　　 解决方法：

　　　　　如果想让背景图片跟右边缘保持 20px 的偏移量，同时跟底边也保持 20px 的偏移量，

　　　  我们只需要根据 background-position扩展语法即可，如下

　　　　background-position: right 20px bottom 20px;

　　DEMO

<!DOCTYPE html>

<html>

    <head>

        <meta charset="utf-8" />

        <title></title>

        <style>

          section {

              margin: 0 auto;

              width: 400px;

              height: 200px;

              padding: 10px;

              color: #fff;

              font-size: 24px;

              background: url(http://csssecrets.io/images/code-pirate.svg) no-repeat right bottom #58a;

              background-position: right 20px bottom 20px;

          }

        </style>

    </head>

    <body>

        <section>Code Pirate</section>

    </body>

</html>

　　书中在线实例链接：http://dabblet.com/gist/0f226e63595d1bef88cb

CSS揭秘—灵活的背景图（三）的更多相关文章

  1. CSS之全屏背景图

    吐槽啦:Yeah  明天就是国庆了o(*￣▽￣*)o!哈哈,提前祝福各位园友国庆快乐.假期愉快.生活美满.天天开心!国庆我要回家一趟,把一些不用的东西带回家,走访一下亲朋好友,在家打几天酱油~~~ 言 ...

  2. css中用一张背景图做页面的技术有什么优势？

    css中用一张背景图做页面的技术有什么优势? 简单介绍一下 CSS Sprites 的优点: 当用户往U盘中拷200张图片,会等很久.但是如果弄成一个文件,再拷贝就会快很多. CSS Sprites ...

  3. 清除css、javascript及背景图在浏览器中的缓存

    在实际项目开发过过程中,页面是上传到服务器上的.而为了减少服务器的压力,让用户少加载,浏览器会将图片.css.js缓存到本地中,以便下次访问网站时使用.这样做不仅减少了服务器的压力,并且也减少了用户的 ...

  4. 【Web前端】清除css、javascript及背景图在浏览器中的缓存

    在实际项目开发过过程中,页面是上传到服务器上的.而为了减少服务器的压力,让用户少加载,浏览器会将图片.css.js缓存到本地中,以便下次访问网站时使用.这样做不仅减少了服务器的压力,并且也减少了用户的 ...

  5. css设置全屏背景图，background-size 属性

    在写主题样式的时候经常会碰到用背景图铺满整个背景的需求,这里分享下使用方法 需要的效果 图片以背景的形式铺满整个屏幕,不留空白区域 保持图像的纵横比(图片不变形) 图片居中 不出现滚动条 多浏览器支持 ...

  6. 【CSS】div的背景图完整图片覆盖

    最初的代码: .container_first { width: 100%; height: 100%; background: url(10176581.jpg); background-size: ...

  7. 通过css使用background-color为背景图添加遮罩效果

    一个div同时设置background-color和background-image的话,color是处于img层下方的,无法实现遮罩效果,所以需要再创建一个div作为其子div,然后设置子div的背 ...

  8. vue css采用别名引入背景图

    在vue css中采用别名引入 背景图片,可以在前面加一个波浪号 css 属性中: background: url("~@/assets/xxx.jpg") Webpack 会将以 ...

  9. CSS揭秘之《背景图案》

    网格 html { background: #58a; background-image: linear-gradient(white 2px, transparent 0), linear-grad ...

随机推荐

  1. 配置phpstorm自动上传代码

    本地的项目目录是 D:\www\guandan 虚拟机上的项目目录是 /var/www/guandan

  2. LESS的好处

    今日目标: 1:今天的学习内容是在工作完成的情况下,学习Less(之所以学习Less是因为项目中使用的是Less)-------------当前进度(0%) 注意项: 务必确保在 less.js 之前 ...

  3. struts2(三)---struts2中的服务端数据验证框架validate

    struts2为我们提供了一个很好的数据验证框架–validate,该框架可以很方便的实现服务端的数据验证. ActionSupport类提供了一个validate()方法,当我们需要在某一个acti ...

  4. 关于linux find命令的使用

    find 和 xargs   xargs和find 在 使用find命令的-exec选项处理匹配到的文件时, find命令将所有匹配到的文件一起传递给exec执行.但有些系统对能够传递给exec的命令 ...

  5. spring的依赖注入是什么意思

    最近学习spring框架,对依赖注入有些模糊,遂上网翻阅资料,做了下列总结,原博客为CSDN 南夏的 spring的依赖注入是什么意思,侵删! Spring 能有效地组织J2EE应用各层的对象.不管是 ...

  6. ASP.NET Core Identity Hands On（1）——Identity 初次体验

    ASP.NET Core Identity是用于构建ASP.NET Core Web应用程序的成员资格系统,包括成员资格.登录和用户数据存储 这是来自于 ASP.NET Core Identity 仓 ...

  7. log.go 源码阅读

    ) //打开文件 权限:文件追加 文件创建 文件读写     if err != nil {         return err     }     level, err := logrus.Par ...

  8. 【缩点+拓扑判链】POJ2762 Going from u to v or from v to u?

    Description In order to make their sons brave, Jiajia and Wind take them to a big cave. The cave has ...

  9. BZOJ_2440_[中山市选2011]完全平方数_容斥原理+线性筛

    BZOJ_2440_[中山市选2011]完全平方数_容斥原理 题意: 求第k个不是完全平方数倍数的数 分析: 二分答案,转化成1~x中不是完全平方数倍数的数的个数 答案=所有数-1个质数的平方的倍数+ ...

  10. BZOJ_1026_[SCOI2009]windy数_数位DP

    BZOJ_1026_[SCOI2009]windy数_数位DP 题意:windy定义了一种windy数.不含前导零且相邻两个数字之差至少为2的正整数被称为windy数. windy想知道, 在A和B之 ...