css 代码,求解读

html-css015

css 代码,求解读,第1张

background-size: length|percentage|cover|contain

描述

测试

length

设置背景图像的高度和宽度。

第一个值设置宽度,第二个值设置高度。

如果只设置一个值,则第二个值会被设置为 "auto"。

percentage

以父元素的百分比来设置背景图像的宽度和高度。

第一个值设置宽度,第二个值设置高度。

如果只设置一个值,则第二个值会被设置为 "auto"。

cover

把背景图像扩展至足够大,以使背景图像完全覆盖背景区域。

背景图像的某些部分也许无法显示在背景定位区域中。

contain

把图像图像扩展至最大尺寸,以使其宽度和高度完全适应内容区域。

transition: property duration timing-function delay

transition-property

规定设置过渡效果的 CSS 属性的名称。

transition-duration

规定完成过渡效果需要多少秒或毫秒。

transition-timing-function

规定速度效果的速度曲线。

transition-delay

定义过渡效果何时开始。

.4s .6s

指的是秒数,相当于0.4s,0.6s

你也可以去www.w3school.com.cn上去看看

好吧,虽然 LZ 真的很懒

我试试简单描述一下

按钮代码重点是 a 和 a:hover,其他的慢慢练

先说 a:hover 你要懂的,hover 就是鼠标指住它的意思

a {

text-indent: -9999px// 重点是要把 <a>的文字推出画面以外,以便显示图片

height: 40px

}

a:hover {

background: transparent url(....) 0 -40px no-repeat

}

给你每个属性分析一下︰

background: transparent

背景色: 透明

background: url(....)

背景图: 网址

background: 0 -40px

背景位置: 由左移动 0px 而且 由上移动 40px

这是为甚麼呢… 因为图片包含不只得一个图示,它是以 image-sprite 的原理表达

你可以想像这个是一个地图,位置就是坐标 X 和 Y 轴

background: no-repeat

背景不重覆或重叠,这是很重要,不然浏览器会认为你的图案是布满全个画面

LZ 你要多看书多看别的网站教学…不然太难说明了