精华内容
下载资源
问答
  • css 背景图片自适应属性整理

    万次阅读 多人点赞 2019-06-25 19:36:42
    本篇博客主要记录一些使用 css背景图片自适应的操作整合 背景图片取消重复 background-image: url(image.jpg); background-repeat:no-repeat; 修改前 修改后 背景图片固定(不会随着内容滚动而改变位置) ...

    本篇博客主要记录一些使用 css 对背景图片自适应的操作整合

    背景图片取消重复

    background-image: url(image.jpg);
    background-repeat:no-repeat;
    

    修改前
    背景图片取消重复
    修改后
    背景图片取消重复

    背景图片固定(不会随着内容滚动而改变位置)

    background-image: url(image.jpg);
    background-attachment:fixed;
    

    背景图片居中显示

    垂直水平居中

    background-image: url(image.jpg);
    background-repeat:no-repeat;
    background-position:center center;
    

    背景图片居中显示
    水平方向居中 垂直方向向上

    background-image: url(image.jpg);
    background-repeat:no-repeat;
    background-position:center top;
    

    在这里插入图片描述
    水平方向向右 垂直方向向下

    background-image: url(image.jpg);
    background-repeat:no-repeat;
    background-position:right bottom;
    

    在这里插入图片描述

    背景图片等比例拉伸

    background-image: url(image.jpg);
    background-repeat:no-repeat;
    background-size: auto 100%;
    /* background-size: 100% auto; */
    

    背景图片等比例拉伸
    或根据高度进行拉伸
    背景图片等比例拉伸
    还可以使用 cover 自动等比例拉伸图片

    background-image: url(image.jpg);
    background-repeat:no-repeat;
    background-size: cover;
    

    背景图片等比例拉伸

    背景图片拉伸(会扭曲图片)

    background-image: url(image.jpg);
    background-repeat:no-repeat;
    background-size: 100% 100%;
    

    背景图片拉伸(会扭曲图片)

    展开全文
  • 模仿苹果导航条效果,背景图片大小适中适合导航文字宽度
  • CSS模块代码   *{margin:0; padding:0;}  body{padding:10px; font-size:12px;}  h1{margin:0; padding:10px 0; font-size:14px; font-weight:bold;}  .div a{background:url(divcss5.gif) left 0...

    CSS模块代码

     

    *{margin:0; padding:0;} 

    body{padding:10px; font-size:12px;} 

    h1{margin:0; padding:10px 0; font-size:14px; font-weight:bold;} 

    .div a{background:url(divcss5.gif) left 0; color:#fff; text-decoration:none;
     height:30px; float:left; cursor:hand; margin:0 5px 0 0;} 

    .div a:hover{background:url(divcss5.gif) left -30px;height:30px;} 

    .div a span{background:url(divcss5.gif) right 0; padding:7px 8px 7px 0;
     margin:0 0 0 8px; float:left; height:16px;} 

    .div a:hover span{background:url(divcss5.gif) right -30px; color:#000;
     padding:7px 8px 7px 0; margin:0 0 0 8px; height:16px; } 

     

     

     

    HTML模块代码

     

    <div class="div"> 

    <a href="http://www.divcss5.com/"><span>首页</span></a> 

    <a href="http://www.divcss5.com/" target="_blank"><span>DIV CSS</span></a> 

    <a href="http://www.divcss5.com/template/" target="_blank"><span>DIV CSS模块</span></a> 

    <a href="http://www.divcss5.com/peixun/" target="_blank"><span>学习CSS上DIVCSS5!</span></a> 

    <a href="http://www.divcss5.com/shouce/" target="_blank">
    <span>CSS手册 可以查询常见属性</span></a> 

    </div> 

     

     

    展开全文
  • CSS背景图片自适应

    千次阅读 2019-06-26 20:26:25
    body{ background-image: url("${re.contextPath}/plugin/pay/img/payResultBg.png"); height: 100%; width: 100%; no-repeat center top; background-size: 100%; ...
       body{
            background-image: url("${re.contextPath}/plugin/pay/img/payResultBg.png");
            height: 100%;
            width: 100%;
            no-repeat center top;
            background-size: 100%;
            overflow: hidden;
        }
    
    展开全文
  • 主要为大家介绍了CSS实现菜单背景自适应宽度的方法,涉及基于css属性控制背景图片自适应宽度的技巧,具有一定参考借鉴价值,需要的朋友可以参考下
  • 主要为大家介绍了CSS基于单张背景图实现自适应宽度的圆角菜单效果代码,基于css实现自适应宽度的圆角菜单效果,非常简单实用,需要的朋友可以参考下
  • 怎么屏幕自适应????? 我全用了margin的百分比但依旧达不到自适应的/* 打印样式 */ @media print { color: red; } /* 手机等小屏幕手持设备 */ @media screen and (min-width: ... } } /* 平板之类的宽度 10...

    怎么屏幕自适应????? 我全用了margin的百分比但依旧达不到自适应的/* 打印样式 */ @media print { color: red; } /* 手机等小屏幕手持设备 */ @media screen and (min-width: 320px) and (max-width: 480px) { body { background: yellow; } } /* 平板之类的宽度 1024 以下设备 */ @media only screen and (min-

    CSS四个DIV自适应屏幕宽度,间距相同怎么写?

    4个色块宽度相同,自适应屏幕,然后当中间距都为15px,要怎么写?

    15d9b2ee201fdc4fcb0370c8b5c04583.png

    *{padding:0;margin:0;} .box{ width:80%; height:200px; margin:auto; display:flex; flex-direction: row; border:1px solid #000; } .box>div{ height:100%; flex:1; background:red; } .box>div:not(:first-child){ margin-left:15px; }

    div css布局网页如何实现网页自动适应屏幕高度和宽度

    css怎么让一张图片适应任何屏幕大小的电脑平铺?

    不定义div的宽度,以及父div的宽度即可。 来做一个导航: *{margin:0; padding:0; border:0;} .navbg{background:red; height:50px;} .nav{width:980px;height:50px;margin:0 auto;} li{float:left; margin:10px; line-height:30px;} 首页 联系

    想做一张左右布局的网页,可以适应不同屏幕分辨率,只要能在1366*768 以html和body高度宽度设置为100%; 在里面的块级元素设置为百分比布局

    css怎么让一张图片不失真的适应任何屏幕大小的电脑下面是图片不失真但不保证是否完全铺满(留有空隙或者超出屏幕)的css代码:

    横向铺满,纵向留有空隙或超出屏幕:body {background:url(图片路径) no-repeat center; background-size:100% auto;}

    纵向铺满,横向留有空隙或超出屏幕:body {

    CSS背景图片自适应屏幕大小

    如何控制body{background:url(bglogo.gif); 在不同的分辨率显示下 保持background-size:100%;

    展开全文
  • 那么 CSS 怎么设置背景图片自适应全屏呢?这篇文章告诉你。实现效果:源码:CSS设置背景图片自适应 - 编程狮(w3cschool.cn)body{position:fixed;top: 0;left: 0;width:100%;height:100%;min-width:...
  • 不常玩Css,今天需要实现背景图片的自适应分辨率,搞了好久,代码如下: /file/img/welcome_bkg.jpg" height="98%" width="99%" />  使用时,可以根据实际情况微调 width 和 height 的百分比。
  • .foot{ background:url(../images/foot_bj.png); height:129px; margin-top:20px} .foot_area{ width:1000px; margin:0 auto; text-align:center; padding-top:15px; } .foot_area a{color:#1E9CAD;...
  • 之前在介绍CSS sprites的时候提到了自适应宽度的圆角按钮,这个按钮实际应用还是很广泛的,所以我再次也给大家介绍一下。首先请大家看一下这个例子,就是按钮的宽度会根据文字的多少变化,鼠标滑过会有变化效果。 ...
  • div根据div内文字背景图自适应宽度

    千次阅读 2014-02-26 18:08:05
    -- 不要设置宽度 display:inline;float:left;两个属性是必须的 -->   < label id = "emElement" >    ${ 此处为动态内容 }   label >   div > < div style = "background-image: ...
  • 这个上面是通用一般的写法意思就是在你想设置背景的DIV中,添加以上代码,把这个DIV设置为底层,你的其他内容会浮在这个DIV上面,修改你的img src路径就可以了。但是对于很多浏览器来讲还是有问题,因为它预知你的...
  • 对于一个网页来说,有一张好看又清晰的背景图片是非常吸引人的,但是并不是每张图片都是有相同的大小,所以就需要晒西安图片的自适应,那么,css怎么让图片自适应呢?本篇文章将来介绍关于css图片自适应大小的方法。...
  • css可以使用background-size属性设置背景图片自适应,为背景图片设置background-size:cover;样式即可使背景图片自适应css可以使用background-size属性设置背景图片自适应。background-size属性规定背景图像的尺寸...
  • 设计师也经常会给页面的背景使用大,我们既不想图片因为不同分辨率图片变形,也不希望当在大屏的情况下,背景有一块露白,简而言之,就是实现能自适应屏幕大小又不会变形的背景,而且背景图片不会随着滚动条...
  • css可以使用background-size属性设置背景图片自适应,为背景图片设置background-size:cover;样式即可使背景图片自适应css可以使用background-size属性设置背景图片自适应。background-size属性规定背景图像的尺寸...
  • 直接上代码: <div class="img-block"> <div class="right"> test </div> </div> .img-block{ position: relative; width: 100%; background: url("your... background-size: 100
  • 里只设置background: url(""),背景图片没有宽高是无法显示的,如果div里有内容了,会随内容而扩展,如何使背景图片铺满整个浏览器视口? .container{ width: 100%; height: 100%; position: absolute; ...
  • 单张背景图片实现的CSS圆角菜单,菜单项的背景自适应宽度,当菜单项内的文字超出预定宽度时,并不会将文字隐藏掉,而背景自动加宽,以适应文字的需要,设计的很漂亮,也很实用,学习CSS的朋友也可参考学习一下。...
  • div的高度随背景图片的高度变化:原理是通过padding-top或者padding-bottom实现,值是背景图片的宽高比。高度设置为0..newcenter{width:100%;background:url('../../assets/img/newcenter.png')no-repeat;background...
  • CSS实现网页背景图片自适应全屏

    千次阅读 2019-03-25 16:52:43
    设计师也经常会给页面的背景使用大,我们既不想图片因为不同分辨率图片变形,也不希望当在大屏的情况下,背景有一块露白,简而言之,就是实现能自适应屏幕大小又不会变形的背景,而且背景图片不会随着滚动条...
  • 很多人会问到怎么让网页的背景图片自适应屏幕高宽度,因为很多时候如果网页背景图片没有设置自适应的话,在不同分辨率的屏幕上显示的背景会有所不同,分辨率小的时候显示不全,分辨率大的时候又会留有空白,我又不想...
  • 背景图片的宽*高:400*200,要设置放背景的容器的宽高是图片宽高的等比例自适应填充才不变形。比如200*100,300*150等 写法1 li.active a{ background-image:url(/statics/images/game_bg.png); background-repeat...
  • css实现图片自适应容器的几种方式

    万次阅读 多人点赞 2019-07-25 21:59:28
    css实现图片自适应容器 经常有这样一个场景,需要让图片自适应容器的大小。 1、img标签的方式 我们马上就能想到,把width、height 设置为100%啊。来看一哈效果。 <div class='div1'> <img src="./peiqi....
  • CSS背景图片页面自适应充满屏幕】 实现代码: body {  overflow: hidden;  position: fixed;  width:100%;  height:100%;
  • CSS实现自适应宽度

    千次阅读 2009-10-10 16:47:00
    三列等高,实现效果如下: 问题分析:【1】对结构的理解。Main列先显示出来,在结构书写上就应该...参考翻译《使用负边距创建自适应宽度的流体布局》,说白了是自适应宽度,咱们这里要做的是自适应高度… 实现代码:

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 13,978
精华内容 5,591
关键字:

css背景图自适应宽度