css之背景 | padding | 背景图片 | 位置

1.边界距:两个元素之间边框的距离

可以分别指定上右下左;如果写margin:一个值,就是上右下左的边界距都是一个值。

举例:

tip:不写margin的话默认就会是0px,就是不加边界距,就是原来图片的位置

2.填充属性:边框内空间的大小

举例:

3.对任何元素指定背景图片

tips1:找图片的网址,图片右键属性->地址

4.设定背景图片的重复方式:

 默认是重复的

举例:

5.背景附着:

举例:

6.背景定位(用于背景图片):

举例:

离上边100px,离左边100px:

时间: 2024-10-16 21:32:50

css之背景 | padding | 背景图片 | 位置的相关文章

CSS Sprites技术(将背景图整合到一张图中,再利用CSS背景图片定位到要显示的位置)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Typ

css网页中设置背景图片的方法详解

css网页中设置背景图片的方法详解 在css代码中设置背景图片的方法,包括背景图片.背景重复.背景固定.背景定位等 用css设置网页中的背景图片,主要有如下几个属性: 1,背景颜色 {background-color:数值}2,背景图片 {background-image: url(URL)|none}3,背景重复 {background-repeat:inherit|no-repeat|repeat|repeat-x|repeat-y}4,背景固定 {background-attachment

CSS中Backgroud-position(背景图片)定位问题详解

background-position的说明:    设置或检索对象的背景图像位置.必须先指定 background-image 属性.该属性定位不受对象的补丁属性( padding )设置影响.    默认值为: 0% 0% .此时背景图片将被定位于对象不包括补丁( padding )的内容区域的左上角.    如果只指定了一个值,该值将用于横坐标.纵坐标将默认为 50% .如果指定了两个值,第二个值将用于纵坐标.    如果设置值为 right center,因为 right 作为横坐标值将

div css鼠标悬停锚文本超链接文字背景颜色或图片变化

div css鼠标悬停锚文本超链接文字背景颜色或图片变化(体感音乐) css鼠标悬停超链接文字上时背景改变,鼠标经过文字链接时(悬停),文字的背景图片发生改变(出现背景图片或背景颜色). 鼠标经过悬停在超链接文字上时背景颜色或背景图片出现或改变教程篇.(体感音乐) 此DIV CSS布局技巧其实是对a标签做鼠标经过CSS样式.利用以下代码: a{...} 原始超链接默认样式设置a:hover{...}鼠标悬停经过时超链接锚文本CSS样式(扩展阅读:ie6 hover)一.链接文字无背景鼠标经过悬停

laravel项目中css样式表的背景图片不显示

刚学laravel,遇到了很多坑,感觉laravel是挺强大的. 建好后台项目,奈何css样式表的背景图片不显示 .mainhd { background: url(../images/sky/body_bg.png) repeat-x 0px 0px; } 按理上面的写法没错,因为是从别的后台搬过来的,但是图片一直不显示,访问绝对路径却又能显示图片,坑. 原因是因为图片路径要使用单引号或者双引号的,下面是正确的写法 .mainhd { background: url('../images/sk

2014年辛星解读CSS第八节 使用背景图片

这应该是系统CSS的教程的最后一节了,为什么呢,因为到这一节,我感觉基础知识就已经讲完了,接下来的就是无穷的实战,而实战是很难用知识去讲出来的,靠的是积累,拼的是经验,这些都不是讲出来的. 好,我们下面来说一下用CSS添加背景图片的方式把,它在background属性中指定,可以用url("图片路径")的方式来指定背景图片,如果是repeat,则图片在横向和纵向上平铺,如果是no-repeat,则背景图像不会平铺,只显示一次,如果是repeat-x,那么就在水平方向平铺,如果是repe

用css来写一个背景图片的切换

代码如下: <!DOCTYPE HTML> <htmllang="en-US"> <head> <meta charset="UTF-8"> <title>CSS3 Full Background Slider </title> <style type="text/css"> /*字体效果*/ @import url("http://www.w3cplu

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

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

强大的CSS:颜色、背景和剪切

颜色 CSS 中可以改变文字的颜色还有元素的背景颜色.可以用颜色关键字来定义颜色,如red,但是这些颜色关键字并不常用. transparent transparent可以让文字或背景变的完全透明的颜色,它就像rgba(0,0,0,0)的缩写. currentColor currentColor代表原始的color属性的计算值.比如当前元素color为红色,背景色设置为currentColor,那么现在背景色也为红色. rgb.rgba 颜色还可以用rgb函数表示,如rgb(255, 255,