[css]《css揭秘》学习(三)-灵活的背景定位

一、background-position属性

使用该属性,在不确定容器大小的情况下,也可以指定图案距离容器边缘的位置;但是需要为不支持该属性的浏览器指定回退方案,否则,图案会默认放在左上角。

 1 <html>
 2 <head>
 3     <meta charset="utf-8">
 4     <title>灵活的背景定位</title>
 5     <style type="text/css">
 6     div{
 7         background:url(http://csssecrets.io/images/code-pirate.svg)
 8         no-repeat bottom right #58a;/*bottom right是指定的回退方案,避免放在左上角*/
 9
10         background-position: right 20px bottom 10px;
11
12         max-width:10em;
13         min-height: 5em;
14         padding:10px;
15         color:white;
16         font:100% / 1 sans-serif;
17     }
18     </style>
19 </head>
20 <body>
21     <div></div>
22 </body>
23 </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);

时间: 2024-12-18 13:18:07

[css]《css揭秘》学习(三)-灵活的背景定位的相关文章

CSS小随笔(三)浮动与定位

先来说一下CSS中的浮动 一.浮动 1.标准流中的块级盒子,宽度将自动伸展为100%,而浮动的块级盒子,宽度不会自动伸展,而是由内容撑开 2.当一个盒子浮动,标准流中未浮动的其他盒子,将视浮动盒子不存在而占据浮动盒子原来的位置.(浮动盒子,会盖在这个盒子的上方) 但是,未浮动盒子中的文字内容,将会受到浮动盒子宽度的影响.(未浮动盒子中的内容,不会被浮动盒子盖住) 3.由于第二条的原因. 可以给收影响的盒子,添加clear属性,清除掉浮动盒子对自身的影响 clear可选值:left-清除左浮动影响

[CSS揭秘]灵活的背景定位

技巧:可以随意的摆放背景图片的位置 背景知识:在CSS2.1时代,我们只能通过background-position设置图片相对于容器左上角的偏移量,这样当容器的尺寸不固定时,只能近视使用百分比实现.那么在CSS3时代,我们有了更好的解决方案. CSS3时代,background-position属性得到了扩展,允许我们指定背景图片距离任意角的偏移量,只需要在偏移量前面指定方位关键字即可. 对于每一个被设定的背景图片来说,background-position指定背景图片的初始位置.这个初始位置

前端学习(9)~css学习(三):样式表和选择器

本文主要内容 CSS概述 CSS和HTML结合的三种方式:行内样式表.内嵌样式表.外部样式表 CSS四种基本选择器:标签选择器.类选择器.ID选择器.通用选择器 CSS几种扩展选择器:后代选择器.交集选择器.并集选择器 CSS样式优先级 CSS 概述 CSS:Cascading Style Sheet,层叠样式表.CSS的作用就是给HTML页面标签添加各种样式,定义网页的显示效果.简单一句话:CSS将网页内容和显示样式进行分离,提高了显示功能. css的最新版本是css3,我们目前学习的是css

html css的简单学习(三)

html css的简单学习(三) 前端开发工具:Dreamweaver.Hbuilder.WebStorm.Sublime.PhpStorm...==========================================================head头的本质:优化页面,利于搜索:设置字符集,防止乱码:引入外部样式方便:规定呈现样式.===========================================================<meta name="

根据兄弟元素的数量来设置样式(CSS揭秘学习笔记)

CSS揭秘学习笔记 li.length == 4 li:first-child:nth-last-child(4), li:first-child:nth-last-child(4) ~ li { /* 当列表正好包含四项时,命中所有列表项 */ } li.length >= 4 li:first-child:nth-last-child(n+4), li:first-child:nth-last-child(n+4) ~ li { /* 当列表至少包含四项时,命中所有列表项 */ } li.l

HTML CSS——zoom的学习

上大学做阶段项目时遇到了一个很奇特的现象:kindEditor上传图片功能失效,但是把jsp所引用的样式去掉就好用,这说明样式有问题,于是删一个样式测试一下,就这样罪魁祸首落在了zoom身上,这是我们第一次"相识",今天周末,难得的清闲,现总结一下: 首先说一下zoom的作用:zoom用来设置对象的缩放比例: zoom属性值:normal | <number> | <percentage> 一.normal: 代码1-1如下: <!DOCTYPE html

CSS实现的鼠标悬浮整行背景变色代码

CSS实现的鼠标悬浮整行背景变色代码:在新闻列表形式的不居中,为了清晰的分辨每一行,一般当鼠标悬浮在一行上的时候,能够实现当前行整行变色,下面就通过代码实例简单介绍一下如何实现此效果,代码如下: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="author" content="http://www.softwhy.com/

CSS一周学习总结

学习css一周左右了,基本都是学习的最基础的部分,但是难免有一些不懂或者说运用比较生硬的地方. 1.选择器中的复合选择器的后代选择器,不能够理解和运用. 2.line-height和height的区分,同理宽度也一样. 3.制作导航移入时的变化,无法很好的运用. 4.padding属性不能灵活的运用. 虽然感觉自己会css了,但是总感觉缺少真正的灵魂东西. CSS一周学习总结,布布扣,bubuko.com

对浏览器css兼容性的学习理解及问题解决汇总

一.从浏览器内核的角度 来看,浏览器兼容性问题可分为以下三类: 1. 渲染相关:和样式相关的问题,即体现在布局效果上的问题. 2. 脚本相关:和脚本相关的问题,包括JavaScript和DOM.BOM方面的问题.对于某些浏览器的功能方面的特性,也属于这一类. 3. 其他类别:除以上两类问题外的功能性问题,一般是浏览器自身提供的功能,在内核层之上的. 二.浏览器兼容性相关问题及其解决思路 1.目前,各主流浏览器的新版本,对于  W3C  的标准支持很好,因此,首先保证代码符合 W3C 的标准,这是