精华内容
下载资源
问答
  • 推荐一个css背景图片位置采点工具(CSS Sprite):http://css.v2bo.com/

           可以对小图片进行拼接成一张大图片,减少服务器请求,提高加载速度。

           下载地址:http://www.greenxf.com/soft/50957.html

           

    展开全文
  • css背景图片位置:background的position position的两个参数:水平方向的位置,垂直方向的位置----------该位置是指背景图片相对于前景对象的1.background:url(../image/header.jpg) no-repeatleft top; /*...

    css背景图片位置:background的position

     

    position的两个参数:水平方向的位置,垂直方向的位置----------该位置是指背景图片相对于前景对象的

    1.background:url(../image/header.jpg) no-repeat left top;  /*相当于0%  0%*/
    表示背景图片在指定div的位置,从左上角开始

    2.background:url(../image/header.jpg) no-repeat right bottom;  /*相当于100%   100%*/
    表示背景图片从指定div的右下角开始显示图片,并且背景图片右下角与div的右下角重合

    3.background:url(../image/header.jpg) no-repeat 300px 200px;   
    即背景图片距div的左边界300px,距div的上边界200px。

    4.background:url(../image/header.jpg) no-repeat 50% 50% ;  
    /* 相当于background:url(../image/header.jpg) no-repeat center ; */
    背景图片在div中水平方向与竖直方向都居中显示

    5.background:url(../image/header.jpg) no-repeat 300px;   /*相当于300px 50%*/
    若只写一个参数,则另一个参数默认为50%,即背景图片距div的左边300px,而竖直方向居中。

    6.background:url(../image/header.jpg) no-repeat -300px -100px ;
    背景图片相对于div左上角(0px,0px) 又向左移动了300px,向上移动了100px

    7.background:url(../image/header.jpg) no-repeat 30% 30%;  

    背景图片的(30%, 30%)的点与其所属的div的(30%, 30%)的点对齐。


    但注意:百分比值同时应用于元素div及其背景图像。
    例如:
    (1)当在某一元素里居中背景图像时,图像中被描述为50% 50%的点将与元素中同样描述的点对齐。
    (2)要使背景图像横跨元素的三分之一,纵跨三分之二,可以按如下声明:
             background:url(beijing.gif)   no-repeat  33% 66%; 
             这就使得图像上相对于左上角水平为三分一,垂直为三分之二的那个点与元素中的同样的点重合。

      注意,百分比的水平值总是在前面。如果将上例中的这两个百分比值交换位置,那么背景图像将被放于水平三分之二,垂直三分之一处。同样,当只给出一个百分比值时,这个值为水平值,而另一个垂直百分比值被假定为50%。当只有一个值给出时,另一个被假定为center。

    转载于:https://www.cnblogs.com/lianghong/p/8320324.html

    展开全文
  • position的两个参数:水平方向的位置,垂直方向的位置----------该位置是指背景图片相对于前景对象的1.background:url(../image/header.jpg) no-repeat left top; /*相当于0% 0%*/表示背景图片在指定div的位置,从...

    position的两个参数:水平方向的位置,垂直方向的位置----------该位置是指背景图片相对于前景对象的

    1.background:url(../image/header.jpg) no-repeat left top;  /*相当于0%  0%*/
    表示背景图片在指定div的位置,从左上角开始

    2.background:url(../image/header.jpg) no-repeat right bottom;  /*相当于100%   100%*/
    表示背景图片从指定div的右下角开始显示图片,并且背景图片右下角与div的右下角重合

    3.background:url(../image/header.jpg) no-repeat 300px 200px;   
    即背景图片距div的左边界300px,距div的上边界200px。

    4.background:url(../image/header.jpg) no-repeat 50% 50% ;  
    /* 相当于background:url(../image/header.jpg) no-repeat center ; */
    背景图片在div中水平方向与竖直方向都居中显示

    5.background:url(../image/header.jpg) no-repeat 300px;   /*相当于300px 50%*/
    若只写一个参数,则另一个参数默认为50%,即背景图片距div的左边300px,而竖直方向居中。

    6.background:url(../image/header.jpg) no-repeat -300px -100px ;
    背景图片相对于div左上角(0px,0px) 又向左移动了300px,向上移动了100px

    7.background:url(../image/header.jpg) no-repeat 30% 30%;  

    背景图片的(30%, 30%)的点与其所属的div的(30%, 30%)的点对齐。


    但注意:百分比值同时应用于元素div及其背景图像。
    例如:
    (1)当在某一元素里居中背景图像时,图像中被描述为50% 50%的点将与元素中同样描述的点对齐。
    (2)要使背景图像横跨元素的三分之一,纵跨三分之二,可以按如下声明:
             background:url(beijing.gif)   no-repeat  33% 66%; 
             这就使得图像上相对于左上角水平为三分一,垂直为三分之二的那个点与元素中的同样的点重合。

      注意,百分比的水平值总是在前面。如果将上例中的这两个百分比值交换位置,那么背景图像将被放于水平三分之二,垂直三分之一处。同样,当只给出一个百分比值时,这个值为水平值,而另一个垂直百分比值被假定为50%。当只有一个值给出时,另一个被假定为center

    转载于:https://www.cnblogs.com/sdgjytu/p/3553586.html

    展开全文
  • 这个时候图片应该在容器的什么位置呢,算法公式如下:  图片左顶点距容器左顶点的坐标位置为  x:(盒子的宽度-图片的宽度)x 50%  y:(盒子的高度-图片的高度)x (-30%) 得到的结果应用坐标法则,差值如果为负数,...

    [Web前端技术教学]CSS背景图片位置的百分比解释


    代码:

    background:#FFF url(image) no-repeat fixed 50% -30%; 

    解释:

    这个时候图片应该在盒子的什么位置呢,算法公式如下:
    图片左顶点距盒子左顶点的坐标位置为: 
    x:(盒子的宽度-图片的宽度)x 50%       y:(盒子的高度-图片的高度)x (-30%)

    得到的结果应用坐标法则,差值如果为负数,百分比为正那么运算结果是负值。如果差值为负数,百分比也为负数,那么运算结果就是正数。总而言之就是这里的运算符合运算法则。把运算的结果带入坐标法则就能得到图片的位置。 

    比如:盒子是width:600px;height:600px;   而图片是width:200px;height:200px;

    我们用上面的样式,可以得到图片位置为:
    x:(600px-200px) x 50%       y:(600px-200px) x (-30%) 

    图示:


    展开全文
  • css背景图片固定位置 Backgrounds have become an integral part of creating a web 2.0-esque website since gradients have become all the rage. If you think gradient backgrounds are too cliche, maybe a ...
  • 下面我们来看一下css设置背景图片位置的方法。在背景图片的背景图片位置属性中,background-position是用来控制元素背景图片的位置。它接受三种值:关键词:如top、right、bottom、left、center长度值;如px、em、rem...
  • 下面我们来看一下css设置背景图片位置的方法。在背景图片的背景图片位置属性中,background-position是用来控制元素背景图片的位置。它接受三种值:关键词:如top、right、bottom、left、center长度值;如px、em、rem...
  • css 背景图片自适应属性整理

    万次阅读 多人点赞 2019-06-25 19:36:42
    本篇博客主要记录一些使用 css背景图片自适应的操作整合 背景图片取消重复 background-image: url(image.jpg); background-repeat:no-repeat; 修改前 修改后 背景图片固定(不会随着内容滚动而改变位置) ...
  • 背景属性可以设置背景颜色 背景图片 背景平铺 背景图片位置 背景图像固定等 背景颜色: background-color属性定义了元素的背景颜色 background-color:颜色值; 一般情况下元素背景颜色默认值是transparent(透明),...
  • 背景属性可以设置背景颜色,背景图片,背景平铺,背景图片位置,背景图像固定等。 背景颜色 background-color属性定义了元素的背景颜色。 background-color:颜色值; 一般情况下元素背景颜色默认值是transparent...
  • CSS基础—>CSS背景图片

    2020-04-27 16:12:12
    背景属性可以设置背景颜色、背景图、背景平铺、背景图片位置、背景图像固定等等 背景图片 background-image属性描述了元素的背景图像、实际开发常见于logo或者一些装饰的小图片或者是超大的背景图片,优点是非常便于...
  • css 背景图片

    2020-06-21 15:04:56
    背景图片插入: ...****背景图片位置 background-position:x y; 如果两个值都是方位名词 顺序无关 如left top和top left效果一致 如果指定了一个方位名词,另一个值省略,则第二个值默认居中对齐 ...
  • CSS背景图片

    2020-11-19 23:53:02
    背景图片固定(不会随着内容滚动而改变位置) background-image: url(image.jpg); background-attachment:fixed; 背景图片居中显示(垂直水平居中) background-image: url(image.jpg); background-repeat:no-...
  • Css背景图片

    2018-06-20 09:13:39
    1.背景图片的存在位置 背景图片,顾名思义就是说元素的背景是图片。 背景图片存放于背景颜色之上。2.怎样设置背景图片 1》设置样式 background-image url(图片的相对位置) 就设置成功了。3.图片比你的盒子大会...
  • 固定背景图片的通常方法就是把background-attachment设成fix,进一步的话自然则是用background-position,下面来详解使用CSS固定页面背景图片位置的方法:
  • position的两个参数:水平方向的位置,垂直方向的位置----------该位置是指背景图片相对于前景对象的 1.background:url(../image/header.jpg) no-repeat left top; /*相当于0% 0%*/ 表示背景图片在指定div的...
  • 背景图片位置 5.背景图像固定 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>css背景</title> </head> <style> /* 1.背景颜色-默认透明...
  • 该属性用来定义元素背景图片的起始位置,在背景图片的背景图片位置属性中,可以使用两种属性值,一种为长度单位,包括长度值 和百分比值;另一种为指定值,包括top, center, bottom, left, righ等,其语法结构如下...
  • CSS中控制背景图片位置

    千次阅读 2017-03-06 15:26:12
    CSS中控制背景图片位置
  • css背景图片属性

    千次阅读 2018-09-14 19:31:44
    设置背景图片 background-repeat:  1.repeat(默认):背景图片在纵向和横向上平铺。  2.no-repeat:背景图片不平铺。  3.repeat-x:背景图片在横向上平铺。...背景图片位置 background-positi...
  • 背景属性可以设置背景颜色,背景图片,背景平铺,背景图片位置,背景图像固定等。 1、背景颜色 background-color属性定义元素背景颜色。 background-color: 颜色值; 一般情况下默认值为透明transparent(透明),我们...
  • ckground-position指定背景图片的初始位置。这个初始位置是相对于以background-origin定义的背景位置图层来说的。 /* Keyword values */ background-position: top; background-position: bottom; background...
  • CSS背景图片路径设置

    千次阅读 2016-07-07 17:07:04
    CSS背景图片路径设置 博客分类:  Css相关   Java代码  /**  在CSS文件里,有时要用到background,即加一个背景图片,一般在做按钮样式时会经常用到。  css中加背景图片根据图片及css...
  • css控制背景图片位置-background-position

    千次阅读 2016-04-30 18:52:48
    最近经常给div在加背景图片的时候,发现背景图片位置总是跟自己想要的效果不一样,所以就粗略的研究了一下,把结果和过程跟大家一起分享一下。现在就用div来举例子,其他的容器也都一样。主要来介绍一下背景...
  • 蛮常见到有人问说,要如何才能让背景图片不管卷轴拉到那边都不会变?这其实只要透过设定 background-attachment 就能达到该效果了。Body其实并不用做任何设定,这边我为了让网页有卷轴,所以在pre包起一段话:...
  • 背景图片:background-imag:url(图片地址); 背景平铺 不平铺:background-repeat:no-repeat; 横向平铺:background-repeat: repeat-x; 纵向平铺:background-repeat: repeat-y; 背景位置 background-position:0...
  • CSS背景设置方法及背景附着 1.背景颜色(color) 语法: background-color:颜色值; 默认值是 transparent 透明的 2.背景图片(image) 语法: background-image:url("图片路径") 小技巧:提倡背景图片后边的地址,...
  • 三、css背景图片和盒子模型 1、背景图片 在给元素设置背景图片的时候一定要注意元素是否宽高。 (1)背景图片我们一般用于小图标背景 或者超大背景图片; (2)背景图片位置只能通过:background-position; ...
  • CSS背景图片中使用SVG,可以使用css background属性的诸多特性,比如图片尺寸和图片位置等等。可以非常轻松的根据设备的尺寸来控制图片的尺寸,还有一个好处就是可以不用把SVG图片插入到html中,从而保持html的...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 1,850
精华内容 740
关键字:

css背景图片位置