精华内容
下载资源
问答
  • HTML背景图片上设置绝对定位,会受到不同电脑的分辨率的影响,影响整体展示效果。 遇到的问题有: 定位左或右跑偏。 页面固定平铺禁止缩放,定位会随着缩放改变 背景图片和定位固定,不同分辨率下图片显示不完整。...

    HTML背景图片上设置绝对定位,会受到不同电脑的分辨率的影响,影响整体展示效果。


    遇到的问题有:

    1. 定位左或右跑偏。
    2. 页面固定平铺禁止缩放,定位会随着缩放改变
    3. 背景图片和定位固定,不同分辨率下图片显示不完整。(小分辨率图片超出,大分辨率 图片左右有间隙)

    解决办法:

    定位一个容器,这个容器设置为1200px 居中显示,市场常见的电脑分辨率最小也就1152吧。定位和图片全部内容放置到这个容器中,不管是怎么的分辨率 文件内容都不会显示不全 。如果是面向市场的活动页面,背景图宽设置 1920px,内容设置到1200px容器中,是为了适应大的分辨率,同时最小的分辨率也不会显示不全。

    ① 定位一个容器 图片放进容器中

    <style>
        <div class="banner">
        <div class="imgbox">
            <img src="img/banner.jpg">
        </div>
    </div>
    
    body{
        margin: 0;
        padding: 0;
        min-width: 1200px;
    }
    .banner{
        width: auto;
        height: 737px;
        position: relative;
        overflow: hidden;
    }
    .banner .imgbox{
        position: absolute;
        top: 0;
        left: 50%;
        margin-left: -960px;
        width: 1920px;
    
    }

    ② 图片放在容器外

     * {
        margin: 0;
        padding: 0;
        list-style: none;
        border: 0;
    }
    
    body {
        background: #000;
        overflow-x: hidden;
    }
    
    .juzhong {
        position: relative;
        left: 50%;
        margin-left: -960px;
    }
    
    .wrap {
        width: 1200px;
        position: absolute;
        top: 0;
        left: 50%;
        bottom: 0;
        margin-left: -600px;
        z-index: 1;
    }
    <img class="juzhong" src="./images/SSL1.jpg" alt="">
    <div class="wrap" style="height: 2763px;">
        <a class="nav0" href="xxx" target="_blank"></a>
    </div>

    ③ 图片设置为背景图

    <style>
        * {
            margin: 0;
            padding: 0;
            list-style: none;
            border: 0;
        }
    	//图片作为背景图
        body {
            background: #000;
            overflow-x: hidden;
            background: url("./images/vTrus.jpg") no-repeat center top;
            background-size: 1920px 5060px;
            padding-bottom: 60%;
            width: 100%;
            height: 0;
            // 设置显示比例
            zoom: 0.74;
        }
        // 容器 固定一个特定区域 区域内设置绝对定位 ,定位不会随着缩放偏移
        .wrap {
            width: 1200px;
            position: relative;
            margin: 0 auto;
        }
    
        .wrap img {
            max-width: 100%;
        }
        // 绝对定位 nav0 
        .wrap .nav0 {
            width: 301px;
            height: 56px;
            position: absolute;
            left: 76px;
            top: 32px;
            border: 1px solid red;
        } 
         // 绝对定位 nav1 
        .wrap .nav1 {
            width: 66px;
            height: 56px;
            position: absolute;
            left: 427px;
            top: 30px;
            border: 1px solid red;
        }
        </style>
        <div class="wrap" style="height: 5060px">
        <a class="nav0" href="xxx" target="_blank"></a>
        <a class="nav1" href="xxx" target="_blank"></a>
        </div>

    测试经验分析:

    `zoom`:  0.74;  
          此过反复测试发现 zoom属性设置0.74,是最适合的比例,小分辨率可以显示全部。
      为了防止大分辨率左右有黑边,可以设置背景图片。
      0.75--0.89之间显示效果比 0.9还要大 。
    
    展开全文
  • 1 绝对定位 绝对定位指使元素相对于html元素或离他最近 的祖先定位元素进行定位。 当将position属性设置为absolute时,则开启 了元素的绝对定位。 当开启了绝对定位以后,可以使用top、right、 bottom、left四个属性...

    1 绝对定位

    绝对定位指使元素相对于html元素或离他最近 的祖先定位元素进行定位。
    当将position属性设置为absolute时,则开启 了元素的绝对定位。
    当开启了绝对定位以后,可以使用top、right、 bottom、left四个属性对元素进行定位。
    绝对定位的特点:
    绝对定位会使元素完全脱离文本流。
    绝对定位的块元素的宽度会被其内容撑开。
    绝对定位会使行内元素变成块元素。
    一般使用绝对定位时会同时为其父元素指定一 个相对定位,以确保元素可以相对于父元素进 行定位。

    2 固定定位

    固定定位的元素会被锁定在屏幕的某个位置上,当 访问者滚动网页时,固定元素会在屏幕上保持不动。
    当将position属性设置为fixed时,则开启了元素的 固定定位。
    当开启了固定定位以后,可以使用top、right、
    bottom、left四个属性对元素进行定位。
    固定定位的其他特性和绝对定位类似。

    z-index

    当元素开启定位以后就可以设置z-index这 个属性。
    这个属性可以提升定位元素所在的层级。
    z-index可以指定一个整数作为参数,值越 大元素显示的优先级越高,也就是z-index 值较大的元素会显示在网页的最上层。

    3 background-image

    background-image可以为元素指定背景 图片。
    和background-color类似,这不过这里使 用的是一个图片作为背景。
    需要一个url地址作为参数,url地址需要指 向一个外部图片的路径
    例如:

    background-image: url(1.jpg)
    1
    4 background-repeat

    background-repeat用于控制背景图片的 重复方式。
    如果只设置背景图片默认背景图片将会使 用平铺的方式,可以通过该属性进行修改。
    可选值:
    repeat:默认值,图片左右上下平铺
    no-repeat:只显示图片一次,不会平铺
    repeat-x:沿x轴水平平铺一张图片
    repeat-y:沿y轴水平平铺一张图片

    5 background-position

    background-position用来精确控制背景 图片在元素中的位置。
    可以通过三种方式来确定图片在水平方向 和垂直方向的起点。
    关键字:top right bottom left center
    百分比
    数值

    6 background-attachment

    background-attachment用来设置背景图 片是否随页面滚动。
    可选值:
    scroll:随页面滚动
    fixed:不随页面滚动

    7 background

    background是背景的简写属性,通过这个 属性可以一次性设置多个样式,而且样式 的顺序没有要求。
    例如:

    background: green url(1.jpg) no-repeat center center fixed;
    1
    8 CSS Sprite

    CSS Sprites是一种网页图片应用处理方式。
    通过这种方式我们可以将网页中的零星图 片集中放到一张大图上。
    这样一来,一次请求便可以同时加载多张 图片,大大提高了图片的加载效率

    9 表格

    在Web的历史中,HTML的表格发挥了极大的作用。最 初创建表格就是为了以表格的形式显示数据,后来表格 变成了一个极受欢迎的布局工具。
    但是有了CSS以后,CSS在布局网页方面实际上会更出 色,所以现在我们使用表格的作用只有一个,就是用来 表示格式化的数据。
    HTML中的表格可以很复杂,但是通常情况下我们不需 要创建过于复杂的表格。

    table、tr、th、td

    使用table标签创建一个表格。
    tr表示表格中的一行。
    tr中可以编写一个或多个th或td。
    th表示表头。
    td表示表格中的一个单元格。
    1
    2
    3
    4
    5
    caption、thead、tbody、tfoot

    caption表示表格的标题。
    thead表示表格的头部。
    tbody表示表格的主体。
    tfoot表示表格的底部。
    1
    2
    3
    4
    10 合并单元格

    合并单元格指将两个或两个以上的单元格 合并为一个单元格。
    合并单元格可以通过在th或td中设置属性 来完成。

    横向合并
    colspan
    纵向合并
    rowspan
    1
    2
    3
    4

    展开全文
  • /*css绝对定位水平居中*/ .botsystem{ position: absolute; width:1263px; height: 43px; left: 50%; /*打开注释部分则需注释掉此部分*/ transform: translate(-50%, 0); //第一个值是left,第二个值是top ...
    //html
    <div class="botcom">
        <div class="bottomcomm">
            <img src="images/bot.png">
            <div class="botsystem">
                <p>hell word;hell word;hell word;hell word;hell word;hell word</p>
                <p>友情链接:<a href="javascript:void(0);">http://www.baidu.com/</a></p>
            </div>
        </div>
    </div>

    //css

    .botcom{
        width: 100%;
        height: 55px;
    }
    .bottomcomm{
        width: 100%;
        height: 55px;
        position: relative;
    }
    /*img设置为背景图*/
    .bottomcomm img{
        width:100%;
        height: 55px;
        top: 0;
        left: 0;
        position: absolute;
        z-Index:-1;
    }
     /*css绝对定位水平居中*/
    .botsystem{
        position: absolute;
        width:1263px;
        height: 43px;
        left: 50%;    /*打开注释部分则需注释掉此部分*/
        transform: translate(-50%, 0);   //第一个值是left,第二个值是top
        padding-top: 12px;
        /*left: 0;*/
        /*top: 0;*/
        /*right: 0;*/
        /*bottom: 0;*/
        /*margin: auto;*/
    }
    
    .botsystem p{
        text-align: center;
        font-size: 10px;
        line-height: 16px;
    }
    展开全文
  • 前言: 在小程序中,有时需要用到背景图片,但是如果使用background-image的话,就无法控制图片的大小,background-image一般用于将图片压缩为1像素的背景图片,然后自动填充铺满。使用背景图片的话,一般使用一些新...

    前言:

    在小程序中,有时需要用到背景图片,但是如果使用background-image的话,就无法控制图片的大小,background-image一般用于将图片压缩为1像素的背景图片,然后自动填充铺满。使用背景图片的话,一般使用一些新的view层,如<image class="jxlogo" src="../../image/jx.png"/>等,但是小程序与html类似,一个不同的 css或wxss会占据一个位置,然后接下来的css或wxss会自动往下排版,但是很多时候这并不是我们想要的,于是需要用的绝对定位。

    使用绝对定位,最好使用一个新的wxss将所有子控件包含起来,然后在这个包含所有子控件的wxss中,定义一个属性 position: relative,在每个子控件中,定义 position: absolute,现在就可以通过绝对定位来修改位置,如top等,以下附上部分wxss代码:

    .jx_card{ width: 100%; height: 295rpx; background-color:#e6e6e6; position: relative } .jxlogo{ top: 47.5rpx; margin-left: 50rpx; width: 200rpx; height: 200rpx; float: left; position: absolute; }

    然后附上wxml代码:

    <view class="jx_card"> <image style="width: 740rpx; height: 275rpx;margin-left=10rpx;margin-top:10rpx;" mode="{{item.mode}}" src="../../image/优惠券_03.png"> <image class="jxlogo" src="../../image/jx.png"/> </image> </view>

    大概内容就是这样,主要是通过position先定义定位的类型,然后通过top去找到图片上的位置,并定义上去。

    展开全文
  • home.png是一张大小为1089*948大小的背景图片 subscriber-login.png是一张大小为203*32大小的登陆按钮图片,而且该图片截取于背景图片中,位置为(822,171)   需求: 现在想要实现一个页面,居中显示背景图片,然后...
  • #div1{ width:200px; height:200px; margin:100px auto; border:1px solid #404040; position:relative; } #tu1{ width:200px; height:200px; background:url("t1.g
  • 绝对定位和相对定位的研究

    千次阅读 2018-05-02 18:10:58
    绝对定位和相对定位的研究 现象: 研究jsp页面元素的绝对定位、相对定位、静态定位 定位属性: 首先看下 position 属性的设置 static :无特殊定位 relative:相对定位 absolute:绝对定位 一:静态定位...
  • 一. position语法与结构 position语法: position : static absolute ...absolute : 将对象从文档流中拖出,使用left,right,top,bottom等属性进行绝对定位。而其层叠通过css z-index属性定义。此时对象不
  • CSS 定位 (Positioning) 属性允许你对元素进行定位。 通过使用 position 属性,我们可以选择 4 种不同类型的定位,这会影响元素框生成的方式。 position 属性值的含义: static 没有定位,元素出现在正常的流中top, ...
  • 绝对定位调节位置

    2019-05-28 09:14:00
    绝对定位调节位置 在写完一个内容的样式后,它刚开始是不会按照你的想象去排的,这个也·需要自己设置 首先新建HTML、CSS文档各一个并把它们保存在同一个文件夹中,然后在HTML中引用CSS,先设置三个“div”一个...
  • css-绝对定位、相对定位、固定定位

    千次阅读 2020-01-31 20:48:29
    css中为了实现目标元素的布局,设计了三种元素的定位模式:绝对定位(absolute)、相对定位(relative)、固定定位(fixed。 语法: css选择器{ /*position的取值有四种:1)absolute-绝对定位; 2)relative-...
  • 本次作品用到的知识:绝对定位(absolute)、相对定位(relative)、box居中显示(margin: 0 auto;)。 如果设置了absolute属性的元素的设置了定位属性(position),那么它就以它的父元素为参考定位。如果它...
  • 绝对定位 相对定位 浮动

    千次阅读 2016-07-25 15:56:35
    CSS 有三种基本的定位机制:普通流、浮动和绝对定位。 除非专门指定,否则所有框都在普通流中定位。也就是说,普通流中的元素的位置由元素在 (X)HTML 中的位置决定。 块级框从上到下一个接一个地排列,框之间...
  • 绝对定位&固定定位&元素的层级&opacity元素的透明背景 相对定位 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content=...
  • 1.IE中绝对定位子元素相对定位,被后面元素绝对定位覆盖问题。 父元素A{ position:relative; }  |  |——A子元素{ position:absolute; }  | 元素B{ position:relative; } 想要A子元素在元素B之上,...
  • 对于定位而言,只有父类采取了相对定位的设置,子类才能很好地使用绝对定位的设置 另外关于背景的定位 ,使用元素background-position:top left; 相对定位 定位元素是相对于原来没设置过的普通流的元素时来定位的...
  • 1, 父元素相对定位,子元素两个:一个普通文档流(块级元素),在前,一个决对定位元素,在后。 <div class="parent_relative"> <div class="child">...绝对定位子元素</span> </div&...
  • 使用body使用背景图片在绝对定位中剧中 (${ctxStatic}/frame/login/themes/theme-4.png) center 0 no-repeat; verflow:hidden;position:absolute;height:678px; width:1200px;left:0;right:0;top:50p
  • 在IE中实现背景透明就是加在火狐中就设置wmode="transparent"只要使背景透明,绝对定位元素被遮盖的问题也就解决了
  •  Absolute:绝对定位,是相对于最近的且不是static定位的父元素来定位2. Fixed:绝对定位,是相对于浏览器窗口来定位的,是固定的,不会跟屏幕一起滚动。3. Relative:相对定位,是相对于其原本的位置来定位的。4...
  • CSS position绝对定位absolute relative  DIV CSS position绝对定位absolute relative教程篇 常常使用position用于层的绝对定位,比如我们让一个层位于一个层内具体什么位置,为即可使用position:...
  • CSS常用背景图片定位方法

    千次阅读 2017-03-15 10:11:15
    CSS背景图片定位其实对于每一位学习前端的同学来说,都已经非常熟悉了。网上铺天盖地的最常见的一种方案就是在父元素中relative,然后子元素absolute。这种方案当然好,不过带来的一个缺点就是会改变元素的层级关系...
  • 今天研究了一下,总算有所了解。在此总结一下: 先看下各个属性值的定义:  ...2、relative:生成相对定位的元素,通过top,bottom,left,right的设置相对于其正常位置进行定位。可通过z-index进行层次分级。
  • css 绝对定位

    2014-04-10 22:00:30
    绝对定位使用通常是父级定义position:relative定位,子级定义position:absolute绝对定位属性,并且子级使用left或right和top或bottom进行绝对定位。 .divcss5{position:relative} 定义,通常最好再定义 CSS宽度...
  • 如果没有绝对定位,只需要设置margin:0 auto就可以是盒子实现水平垂直居中。但是如果设置了绝对定位,margin:0 auto就没有效果了,那此时又该怎么实现呢? 先来看一个例子,实现如下图的效果,“多 品类齐全...
  • css中的绝对定位和相对定位(详解,总结) 总结: 设置绝对定位或者相对定位后都从文档中浮起来了,区别是相对定位还占着原来的位置,绝对定位不占着原来的位置,可以种z-index来改变元素的浮动的堆叠次序。   ...
  • position: relative;相对定位:想对自身进行定位,参照物是自己。 position: ...绝对定位:相对离它最近的一个已定位的的父级元素进行定位,若该父级元素不存在,则相对于该页面定位。 ...
  • 关于元素绝对定位的父元素问题

    千次阅读 2012-06-27 10:04:20
    在一个技术群里看到别人争论关于子元素绝对定位,父元素要是也是绝对定位了,子元素应该选择以谁为参照物的问题,我刚开始想都没想就觉得它应该选择父元素的父元素为参照物,但是自己写个例子测试了一下,发现自己被...
  • 绝对定位元素设置水平居中

    千次阅读 2017-12-14 14:23:26
    需求:有时页面内的一些容器需要定位在特定的某个位置,但是需要容器在水平方向上面居中显示,比如页面内的一个背景图里面放置一个容器,使用margin-top不方便,就决定使用绝对定位来设置。 实现方法: 方法一、...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 61,110
精华内容 24,444
关键字:

背景绝对定位