[css]《css揭秘》学习(三)-灵活的背景定位
一、background-position属性
使用该属性,在不确定容器大小的情况下,也可以指定图案距离容器边缘的位置;但是需要为不支持该属性的浏览器指定回退方案,否则,图案会默认放在左上角。
<html> <head> <meta charset="utf-8"> <title>灵活的背景定位</title> <style type="text/css"> div{ background:url(http://csssecrets.io/images/code-pirate.svg) no-repeat bottom right #58a;/*bottom right是指定的回退方案,避免放在左上角*/ background-position: right 20px bottom 10px; max-width:10em; min-height: 5em; padding:10px; color:white; font:100% / 1 sans-serif; } </style> </head> <body> <div></div> </body> </html>
二、content-box
每个元素都存在3个矩形边框,border-box,padding-box,content-box,默认情况下,背景图片是从padding-box开始放置的。
如果增加一个属性值:
background-position: content-box,则背景图片将从content box的位置开始放置,通过这样的方式,也可以实现内边距的效果。
三、calc()函数
距离右边和下面各有20px的偏移量,其实就是距离上面和下面各有(100% - 20px)的偏移量;可以使用calc函数,注意在 +/- 前后需要各加一个空格。
background-position: calc(100% - 20px), calc(100% - 20px);
[css]《css揭秘》学习(三)-灵活的背景定位的更多相关文章
- [css 揭秘]:CSS揭秘 技巧(三):背景定位
我的github地址:https://github.com/FannieGirl/ifannie 源码都在这上面哦! 喜欢的给我一个星吧 背景定位 问题:很多时候,我们想针对容器某个角对背景图片做便宜 ...
- CSS小随笔(三)浮动与定位
先来说一下CSS中的浮动 一.浮动 1.标准流中的块级盒子,宽度将自动伸展为100%,而浮动的块级盒子,宽度不会自动伸展,而是由内容撑开 2.当一个盒子浮动,标准流中未浮动的其他盒子,将视浮动盒子不存 ...
- html css的简单学习(三)
html css的简单学习(三) 前端开发工具:Dreamweaver.Hbuilder.WebStorm.Sublime.PhpStorm...=========================== ...
- 原生 CSS 网格布局学习笔记
下是来自Oliver Williams的帖子. Oliver已经学习了相当长时间的原生CSS网格,可以说是在CSS网格方面有一定的发言权.在这篇文章中,他将以非同寻常的思路分析自己的CSS网格布局学习 ...
- Web编程基础--HTML、CSS、JavaScript 学习之课程作业“仿360极速浏览器新标签页”
Web编程基础--HTML.CSS.JavaScript 学习之课程作业"仿360极速浏览器新标签页" 背景: 作为一个中专网站建设出身,之前总是做静态的HTML+CSS+DIV没 ...
- 【CSS复合选择器、元素显示模式、背景】前端小抄(3) - Pink老师自学笔记
[CSS复合选择器.元素显示模式.背景]前端小抄(3) 本学习笔记是个人对 Pink 老师课程的总结归纳,转载请注明出处! 一.CSS的复合选择器 1.1 什么是复合选择器 在 CSS 中,可以根据选 ...
- 对浏览器css兼容性的学习理解及问题解决汇总
一.从浏览器内核的角度 来看,浏览器兼容性问题可分为以下三类: 1. 渲染相关:和样式相关的问题,即体现在布局效果上的问题. 2. 脚本相关:和脚本相关的问题,包括JavaScript和DOM.BOM ...
- css和css3学习
css和css3学习 css布局理解 css颜色大全 样式的层叠和继承 css ::before和::after伪元素的用法 中文字体font-family常用列表 cursor属性 css选择器 F ...
- css的简单学习笔记
1.CSS的简介 *css :层叠样式表 **层叠: 一层一层. **样式表: 具有大量的属性和属性值 *使得页面的显示效果更加好. *css将网页内容和显示样式进行分离,提高了显示功能. *css不 ...
随机推荐
- UWSGI配置文件---ini和xml示例
一 conf.ini文件: [uwsgi] http = $(HOSTNAME):9033 http-keepalive = 1 pythonpath = ../ module = service ...
- 多年心愿,终于完成,热泪盈眶啊。。。Adrew NG 的 机器学习
谢谢Andrew老师!谢谢Coursera!谢谢自己!希望这是一个好的开始!希望自己也能使用机器学习来make a better world...
- jsoup -- xml文档解析
jsoup -- xml文档解析 修改 https://jsoup.org/cookbook/modifying-data/set-attributes https://jsoup.org/cookb ...
- php学习记录
放了寒假.期末考试折腾了一个月都不会写代码了. 一放寒假就找了套PHP培训的课程 在这做些笔记,系统的学习一下php 2017.1.14 介绍集成环境---wamp Apache服务器根目录 / -- ...
- laravel安装excel功能
原文安装链接:https://github.com/Maatwebsite/Laravel-Excel 代码如下: if ($rows = DB::connection('glist')->ta ...
- 一种比较简单的在USB U盘中访问nandflash的方法
u8 nandflash_write_buffer[NAND_SERECT_FULL_SIZE]; static int currentBlock = -1; static int currentPa ...
- IO的五种模型
为了区分IO的五种模型,下面先来看看同步与异步.阻塞与非阻塞的概念差别. 同步:所谓同步,就是在发出一个功能调用时,在没有得到结果之前,该调用就不返回.按照这个定义,其实绝大多数函数都是同步调用(例如 ...
- 基于STM32的uCOS-II移植详解
百度:基于STM32的uCOS-II移植详解 源:基于STM32的uCOS-II移植详解
- eclipse 如何debug jdk源码(转)
转:http://blog.csdn.net/cherrycheng_/article/details/51004386 原英文地址:http://stackoverflow.com/question ...
- 一个异步任务接收两个url下载两个图片
有两个url,一个是下载用户头像的url,一个是下载用户上传图片的url,想要用一个异步任务同时下载这两个图片. 程序的下载任务是这么执行的,先接受url参数,然后调用 imgUrls = infoP ...