精华内容
下载资源
问答
  • DIV背景图片居中

    2011-11-21 15:49:43
    .center { width: 966px; height:538px; text-align:center; top: 0px; margin-top: 0px; padding-top:0px; ... background-image: url(图片路径);...<div class="center"><div>  
    .center {
     width: 966px;
     height:538px;
     text-align:center;
     top: 0px;
     margin-top: 0px;
     padding-top:0px;
     margin-right: auto;
     margin-bottom: 0;
     margin-left: auto;
     background-image: url(图片路径);
     background-repeat: no-repeat;
     background-position: center top; 
    }
    <div class="center"><div>
    

     
    展开全文
  • div背景图片居中

    千次阅读 2010-04-29 20:23:00
    但有时这几个样式不起作用,不能让背景图片居中,这其中可能有各种浏览器兼容的问题,也可能是外层样式干扰的问题,比如包含 DIV 的 BODY 元素又作了一些样式设置,对 DIV 的样式设置造成干扰,...

          许多 web 系统先是登入一个 login 页面, login 页面一般嵌入了一个背景图片,上面写明是什么什么系统,图片上面是一个登录用户名和密码的表单。为了美观,一般情况是把这个背景图片水平和垂直居中。如果背景图片放在了一个 div 里面,水平垂直居中可由如下样式实现

    DIV {

      background-image:url(..../loginPic.jpg);       // 图片来源

      background-repeat:no-repeat;                    // 图片不重复

      background-position:center center              // 设置水平和垂直居中

    }

         但有时这几个样式不起作用,不能让背景图片居中,这其中可能有各种浏览器兼容的问题,也可能是外层样式干扰的问题,比如包含 DIV BODY 元素又作了一些样式设置,对 DIV 的样式设置造成干扰,这时你可能不知怎样定位背景图片,不能肯定究竟是哪一个样式能使图片居中。为解决问题,不妨在 DIV 中引入样式 margin:a,b,c,d abcd 分别表示背景图片的上边、右边、下边、左边离屏幕边沿的距离,根据不停的观察图片的位置实时的调整距离,直到图片居中,同时还克服了浏览器兼容的老大难问题,这也是样式设置太多太杂时不是办法中的办法。

     

    如若转载,请说明出处! http://blog.csdn.net/xukunddp

     

    展开全文
  • div背景图片等比例缩小如何居中

    千次阅读 2019-07-10 11:59:34
    有时候我们想通过CSS使背景图片background-image居中显示,但是发现CSS语法并没有提供background-align:center这样的用法,这篇教程详细地讲解了CSS背景图片background-image缩放如何居中显示,分为两种情况:①背景...

    有时候我们想通过CSS使背景图片background-image居中显示,但是发现CSS语法并没有提供background-align:center这样的用法,这篇教程详细地讲解了CSS背景图片background-image缩放如何居中显示,分为两种情况:①背景图片尺寸小于容器尺寸;②背景图片尺寸大于容器尺寸。

    背景图片尺寸小于容器尺寸

    通过background的center属性实现背景图片居中。

    把CSS背景图片background-image的url()、no-repeat和center center写在一起。注意两个center分别代表背景图片水平方向居中和垂直方向居中。

    通过background-position-x和background-position-y实现背景图片居中。

    分别给background-position-x和background-position-y赋值center。

    背景图片尺寸大于容器尺寸

    给background-size赋值容器宽高最小值来实现CSS背景图片background-image缩放后居中显示。

    给background-size属性赋值容器宽度和高度中的最小值,并配合background-position-x和background-position-y赋值center来实现CSS背景图片background-image缩放后居中显示。

    给background-size赋值100%实现CSS背景图片background-image缩放后居中显示。

    这种赋值方法会导致图片非等比例缩放,也就是导致图片会适应容器的高宽比。

    如果你需要的是内容垂直居中,可以点击下面我写的另外一篇教程《CSS垂直居中的8种方法》。

    通过background-size:contain实现CSS背景图片background-image缩放后居中显示。

    contain的优点是会保留背景图片的宽高比,不会被拉伸变形,所以适用于保留背景图片宽高比的需求中。

    把div设置固定宽度width: 1349px;位置调为margin: 0 auto;如下

    .aaa {
       background:url('img/choose.jpg');
       background-size:100% 100%;
       margin-top: 20px;
       height:320px;
       width: 1349px;
       float: none;
       margin: 0 auto;
    }

    可以避免等比例缩小图片靠左显示没居中。

    展开全文
  • css<div>背景图片居中不平铺

    千次阅读 2015-07-31 11:01:15
    &lt;div class='frame_box' style='background:url("+imageServer+goodsNature.naturepicurl+") center no-repeat;'&gt;

    <div class='frame_box'  style='background:url("+imageServer+goodsNature.naturepicurl+") center no-repeat;'>

    展开全文
  • DIV CSS布局的页面里,从布局内容到页面里文章文字居中都是非常重要的,而css来设置居中也是非常简单的。  1、首先介绍使用css属性让整体布局的居中:  设置对象的父级内容居中,这里一个页面的为父级是什么呢...
  • 当我们的背景图片写成:background...时,表示背景图片不重复,位置会默认为在div中居于左上角。例:#header {width: 100%;height: 400px;border: 1px solid;background: url("images/titleborder.png") no-repeat;}...
  • 【DIV+CSS】DIV背景图片水平垂直居中

    千次阅读 2014-05-13 15:41:08
    样式代码:width: 382px; height: 302px; position: absolute; left: 50%; top: 50%; margin-left: -250px; margin-top: -150px; background-image: url("../skins/green/login/login_bg.png");
  • 在Web开发中咱们常常要碰到这样的问题:在为一个页面设置背景图片以后每每但愿图片可以在分辨率比较大的状况下水平垂直都居中显示。一般水平居中显示在Css中是很容易作到的,而垂直居中就须要使用一些Css的技巧:css...
  • 1.效果 2.实现 ...div style="background-size: cover;-moz-background-size: cover;width: 100%;height: 171px;background: url('static/image/1.png') no-repeat center;"> </div> ...
  • [code="html"] div里面图片垂直居中的几个例子 [/code] 下面是背景图片居中的效果
  • HTML CSS中实现DIV中的图片水平垂直居中对方法:所谓的图片水平垂直居中就是把图片放在一个容器元素中(容器大于图片尺寸或是指定了大小的容器),并且图片位居此容器正中间(中间是指元素容器的正中间),而图片不是以...
  • ; charset=utf-8" /> <title>CSS test body { margin: 0; background-image: url('images/bg1.jpg')...<div id="inner-header"> CSS Demo </div> </div> <div id="main"> </div> <div id="footer"> </div>
  • 当图片大于div时,想要图片居中显示,如果图片等比例缩小可能会导致图片不能填充整个div,如果直接将图片不设置宽高,将其外层div设置overflow:hidden;这时即使外层div设置了水平垂直居中,图片也不是居中的效果: ...
  • #login { width:100%; height:345px; background-color:#e2e8c4; } #login div { /* background-color:Green; */ h
  • div中添加背景图片居中显示

    千次阅读 2017-02-07 12:53:17
    1、div元素的居中需要设置对应的宽度及左边边界的宽度, margin后的参数可以是两个或者四个,两个时指的是上下、左右边界的宽度,四个时指的是上、右、下,左的边界宽度; 2、使用background-image将图片添加...
  • 包含在已经设置为居中div的子div,子div背景图片比起居中部分要向左偏移2px,这是为什么呢? [img=https://img-bbs.csdn.net/upload/201608/10/1470839272_996257.png][/img] 如图 星星左侧边缘我觉得应该...
  • 背景图片居中显示

    2019-01-02 10:56:05
    <div class="newsContbannerImg"> <img width="100%" class="innerimage" :src="hotTodayListImage" alt="新闻图片" ...
  • 网上网友分享的解决方案 <!-- ...BODY {background-image: URL(photo/picture1.jpg);...<div class="banner-out back-img-03"> ...解决了div宽度自适应,并且背景居中显示,不会偏移。
  • 你要居中的元素.css{ position: absolute; left: 0; top: 20rpx; width: 100%; }设置背景的元素.css{ position: relative; margin: 0 auto; box-sizing: border-box; z-index: 1; }
  • 表格背景图片居中

    2013-05-08 16:12:48
    在你所加背景图片的table或div里加入如下代码: style="background-position:center; background-repeat:no-repeat;" 例如: 补充: 是一样的 把 style="background-position:center; background-...
  • 玩转CSS+DIV图片居中

    2009-05-15 14:56:00
    http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">http://www.w3.org/1999/xhtml">将图片的说明显示在图片之上且背景半透明效果body { text-align: center; font-family:Verdana; font-size:14px; }.img-...
  • 主要为大家介绍了在DIV+CSS布局的页面里,让布局、背景图片、文字内容居中的方法,从布局内容到页面里文章文字居中都是非常重要的,而css来设置居中也是非常简单的,详情请看下
  • 这里介绍一些用CSS让背景图片居中的方法。 让背景图片居中的第一个方法是用像素设定,很多都用这种,但是也是最麻烦的: <div style="width:800px;height:600px;background:url(../images/logo.jpg) no-...

空空如也

空空如也

1 2 3 4 5 ... 18
收藏数 359
精华内容 143
关键字:

div背景图片居中