精华内容
下载资源
问答
  • HTML背景图片拉伸铺满,使用CSS实现图片的width和height均100%,具体如下,感兴趣的朋友可以参考下
  • 使用css3 属性:background-size background-size:cover 即可实现像桌面壁纸一样拉伸 以下是w3c上面的解释: 语法 复制代码代码如下: background-size: length|percentage|cover|contain;
  • css设置背景图拉伸铺满!

    万次阅读 2018-06-24 20:29:02
    css样式里设置背景图片拉伸充满有几种方法:1、用body里设置(但是这样的缺点是只能横向充满,高度是按比例拉伸的):background-size:100%;或者:background-size:cover;示例代码:body{ background-image:url...

    在css样式里设置背景图片拉伸充满有几种方法:

    1、用body里设置(但是这样的缺点是只能横向充满,高度是按比例拉伸的):

    background-size:100%;

    或者:background-size:cover;

    示例代码:

    body{
       background-image:url(test.jpg);
       background-repeat:no-repeat;
       background-size:100%;
    }

    2、用一个div充满整个body(这样的缺点可想而知,网页的代码只能放在这个div里):

    示例代码:

    html部分代码:

    <body>
    <div class="background">
    	<h1>测试测试</h1>
    </div>
    </body>

    css样式部分代码:

    body{
    	overflow:hidden;
    }
    div.background{
    	position:absolute;
    	width:100%;
    	height:100%;
    	background-image:url(timg.jpg);
    	background-repeat:no-repeat;
    	background-size:100% 100%;
    	
    }
    

    3、用一个img充满整个body(但是这样子后面的元素都要设置定位了,但自我感觉并不碍事哈~~~):

    html部分代码:

    <body>
    <img class="background" src="timg.jpg" />
    <h1>测试测试</h1>
    </body>

    css样式部分代码:

    body{
    	overflow:hidden;
    }
    img.background{
    	position:absolute;
    	width:100%;
    	height:100%;
    	
    }
    h1{
    	position:absolute;
    	top:0px;
    }

    上面都是我的一些总结,不足之处欢迎补充!

    展开全文
  • 按钮作为DIV的背景图来显示,实际上有多个这样的按钮,而且DIV中的文字,也就是按钮上要显示的文字内容和个数都不定,这种情况下就需要用背景图片拉伸效果来处理了,只需做一个按钮图片,作为DIV的背景图时随着DIV的...
  • 背景图完美适配配视口 body { background-image: url('https://images.unsplash.com/photo-1573480813647-552e9b7b5394?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2253&...

    背景图完美适配配视口

    body {
      background-image: url('https://images.unsplash.com/photo-1573480813647-552e9b7b5394?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2253&q=80');
      background-repeat: no-repeat;
      background-position: center;
      background-attachment: fixed;
      background-size: cover;
      -webkit-background-size: cover;
      -moz-background-size: cover;
      -o-background-size: cover;
    }
    

    使用多个背景图片

    body {
      background-image: url(https://image.flaticon.com/icons/svg/748/748122.svg), url(https://images.unsplash.com/photo-1478719059408-592965723cbc?ixlib=rb-1.2.1&auto=format&fit=crop&w=2212&q=80);
      background-position: center, top;
      background-repeat: repeat, no-repeat;
      background-size: contain, cover;
    }
    

    创建一个三角形的背景图像

    首先创建两个div,然后将两个背景都添加到其中,然后,第二个div使用clip-path属性画出三角形。

    html:

    <body>
      <div class="day"></div>
      <div class="night"></div>
    </body>
    

    css:

    body {
      margin: 0;
      padding: 0;
    }
    
    div {
      position: absolute;
      height: 100vh;
      width: 100vw;
    }
    
    .day {
      background-image: url("https://images.unsplash.com/photo-1477959858617-67f85cf4f1df?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2613&q=80");
      background-size: cover;
      background-repeat: no-repeat;
    }
    
    .night {
      background-image: url("https://images.unsplash.com/photo-1493540447904-49763eecf55f?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2250&q=80");
      background-size: cover;
      background-repeat: no-repeat;
      clip-path: polygon(100vw 0, 0% 0vh, 100vw 100vh);
    }
    

    背景图像上添加叠加渐变

    有时我们想在背景上添加一些文字,但有的图片太亮,导致字看不清楚,所以这里我们就需要让背景图叠加一些暗乐来突出文字效果。

    body {
      background-image: 
        linear-gradient(4deg, rgba(38,8,31,0.75) 30%, rgba(213,49,127,0.3) 45%, rgba(232,120,12,0.3) 100%),
        url("https://images.unsplash.com/photo-1503803548695-c2a7b4a5b875?ixlib=rb-1.2.1&auto=format&fit=crop&w=2250&q=80");
      background-size: cover;
      background-repeat: no-repeat;
      background-attachment: fixed;
      background-position: center
    }
    
    展开全文
  • 如何让背景图片拉伸填充,这个问题听起来似乎很简单。但是很遗憾的告诉大家。不是我们想的那么简单。 比如一个容器(body,div,span)中设定一个背景。这个背景的长宽值在css2.1之前是不能被修改的。 所以实际的结果...
  • css代码: .bg{ background:url(http://hovertree.com/texiao/mobile/3/hovertree01.jpg); filter:"progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod='scale')"; -moz-background-size:100

    在线效果体验:http://hovertree.com/texiao/mobile/3.htm

    请使用手机浏览器查看。

    css代码:

    .bg{  
    background:url(http://hovertree.com/texiao/mobile/3/hovertree01.jpg);  
    filter:"progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod='scale')";  
    -moz-background-size:100% 100%;  
        background-size:100% 100%;  
    }  

     

    HTML文件代码:

    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>DIV缩放背景自适应(不变形)jQuery-HoverTree</title>
    <style type="text/css">
    a {
    color: white;
    }
    
    body {
    font-family: 幼圆,宋体,'Times New Roman', Times, serif;color:white;
    }
    
    .picwidth {
    width: 100%;
    text-align: left;
    filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod='scale')";
    -moz-background-size: 100% 100%;
    background-size: 100% 100%;
    }
    
    body {
    margin: 0px;
    background-color: #120c0c;
    
    }
    
    .content {
    width: 206px;
    margin: 0px auto;
    padding-top: 10px;
    line-height: 16px;
    }
    
    .frame {
    width: 256px;
    margin: 0px auto;
    }
    </style>
    <script src="http://hovertree.com/ziyuan/jquery/jquery-2.1.4.min.js"></script>
    </head>
    <body>
    <div class="frame">
    <div id="contentHead" style="height:231px;background-image:url(http://hovertree.com/texiao/mobile/3/hovertree01.jpg)" class="picwidth">
    <input type="button" value="放大" id="keleyibig" /><input type="button" value="缩小" id="keleyismall" /><a href="http://hovertree.com/hvtart/bjae/f43r3qry.htm">原文</a>
    </div>
    <div id="contentBody" style="background-image:url(http://hovertree.com/texiao/mobile/3/hovertree02.jpg);height:99px;color:White;" class="picwidth">
    <div class="content">
    今日人物:
    <div style="text-align:center">谢霆锋</div>
    <br />请点击放大,缩小按钮。
    </div>
    </div>
    <div id="contentBottom" style="background-image:url(http://hovertree.com/texiao/mobile/3/hovertree03.jpg);height:124px" class="picwidth">DIV缩放背景自适应(不变形)
    <br />请使用支持HTML5的浏览器查看本页
    <br /><a href="http://hovertree.com/texiao/">特效库</a> <a href="http://hovertree.com">首页</a> <a href="http://keleyi.com">柯乐义</a> <a href="http://hovertree.com/hvtart/bjae/f43r3qry.htm">原文</a></div>
    </div>
    <script>
    $(function () {
    
    $(".frame").width(300);
    
    var documentWidth = $(document.body).width();
    if (documentWidth < 600)
    $(".frame").width(documentWidth);
    
    var cHead = $("#contentHead"); var cBody = $("#contentBody"); var cBottom = $("#contentBottom");
    
    function setHeight() {
    cHead.height(((cHead.width() / 320) * 289));
    cBody.height(((cBody.width() / 80) * 31));
    cBottom.height(((cBottom.width() / 64) * 31));
    }
    
    setHeight();
    
    $("#keleyibig").on("click", function ()
    {
    $(".frame").width($(".frame").width() + 50)
    
    setHeight();
    })
    
    $("#keleyismall").on("click", function () {
    $(".frame").width($(".frame").width() - 50)
    
    setHeight();
    })
    
    })
    </script> 
    </body>
    </html>

    Web前端资源:http://www.cnblogs.com/jihua/p/webfront.html

    这张图可作为手机屏幕背景
    cnvkv745.jpg

    展开全文
  • 现在WEB页面设计比较流行使用大背景图,那么您知道如何使用一张大背景图进行拉伸效果呢?也就是说使用一张固定尺寸的背景图片,让它在页面中随着浏览器尺寸进行拉伸,就像我们的电脑桌面壁纸效果。本文将带您一起...
  • CSS背景图拉伸不变形

    2015-08-02 14:55:00
    在线效果体验:... 请使用手机浏览器查看。 css代码: .bg{ background:url(http://hovertree.com/texiao/mobile/3/hovertree01.jpg); filter:"progid:DXImageTransform.Microsoft.Alpha...

    在线效果体验:http://hovertree.com/texiao/mobile/3.htm

    请使用手机浏览器查看。

    css代码:

    .bg{  
    background:url(http://hovertree.com/texiao/mobile/3/hovertree01.jpg);  
    filter:"progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod='scale')";  
    -moz-background-size:100% 100%;  
        background-size:100% 100%;  
    }  

     

    HTML文件代码:

    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>DIV缩放背景自适应(不变形)jQuery-HoverTree</title>
    <style type="text/css">
    a {
    color: white;
    }
    
    body {
    font-family: 幼圆,宋体,'Times New Roman', Times, serif;color:white;
    }
    
    .picwidth {
    width: 100%;
    text-align: left;
    filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod='scale')";
    -moz-background-size: 100% 100%;
    background-size: 100% 100%;
    }
    
    body {
    margin: 0px;
    background-color: #120c0c;
    
    }
    
    .content {
    width: 206px;
    margin: 0px auto;
    padding-top: 10px;
    line-height: 16px;
    }
    
    .frame {
    width: 256px;
    margin: 0px auto;
    }
    </style>
    <script src="http://hovertree.com/ziyuan/jquery/jquery-2.1.4.min.js"></script>
    </head>
    <body>
    <div class="frame">
    <div id="contentHead" style="height:231px;background-image:url(http://hovertree.com/texiao/mobile/3/hovertree01.jpg)" class="picwidth">
    <input type="button" value="放大" id="keleyibig" /><input type="button" value="缩小" id="keleyismall" /><a href="http://hovertree.com/hvtart/bjae/f43r3qry.htm">原文</a>
    </div>
    <div id="contentBody" style="background-image:url(http://hovertree.com/texiao/mobile/3/hovertree02.jpg);height:99px;color:White;" class="picwidth">
    <div class="content">
    今日人物:
    <div style="text-align:center">谢霆锋</div>
    <br />请点击放大,缩小按钮。
    </div>
    </div>
    <div id="contentBottom" style="background-image:url(http://hovertree.com/texiao/mobile/3/hovertree03.jpg);height:124px" class="picwidth">DIV缩放背景自适应(不变形)
    <br />请使用支持HTML5的浏览器查看本页
    <br /><a href="http://hovertree.com/texiao/">特效库</a> <a href="http://hovertree.com">首页</a> <a href="http://keleyi.com">柯乐义</a> <a href="http://hovertree.com/hvtart/bjae/f43r3qry.htm">原文</a></div>
    </div>
    <script>
    $(function () {
    
    $(".frame").width(300);
    
    var documentWidth = $(document.body).width();
    if (documentWidth < 600)
    $(".frame").width(documentWidth);
    
    var cHead = $("#contentHead"); var cBody = $("#contentBody"); var cBottom = $("#contentBottom");
    
    function setHeight() {
    cHead.height(((cHead.width() / 320) * 289));
    cBody.height(((cBody.width() / 80) * 31));
    cBottom.height(((cBottom.width() / 64) * 31));
    }
    
    setHeight();
    
    $("#keleyibig").on("click", function ()
    {
    $(".frame").width($(".frame").width() + 50)
    
    setHeight();
    })
    
    $("#keleyismall").on("click", function () {
    $(".frame").width($(".frame").width() - 50)
    
    setHeight();
    })
    
    })
    </script> 
    </body>
    </html>

    Web前端资源:http://www.cnblogs.com/jihua/p/webfront.html

    这张图可作为手机屏幕背景

    转载于:https://www.cnblogs.com/jihua/p/backimagesize.html

    展开全文
  • 制作页面要在表格内插入背景图时,我们可以使用CSS进行控制,代码如下: style="background-image:url(./images/counter_bg.jpg);background-repeat: no-repeat;background-position:
  • css背景图片自动拉伸铺满

    千次阅读 2019-10-01 12:03:31
    .about-us2{ margin-top: 80px; background: #efefef; background-image: url(../images/aboutus2/about_bg.jpg); ... background-size:100%;...css背景图片自动拉伸铺满以上写法就可以实现。 转载于:https://w...
  • <!... <... <head> ...meta charset="utf-8">...CSS背景图片实现自适应、全屏、填充与拉伸的方法</title> <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min....
  • css怎么把背景图片拉伸至100%

    千次阅读 2019-03-25 23:16:05
    div再加上属性, -moz-background-size:100% 100%; background-size:100% 100%;...这样设置后再看网页就会发现背景图片拉伸至100%了。 https://jingyan.baidu.com/article/ceb9fb10a6f68d8cad2ba017.html ...
  • 前言      在div设置背景图时,背景图经常会随浏览器的拖拽大小的变化而变化,造成形变 解决方法 设置background-size属性 background-size: cover;
  • UI:头尾是特殊的边框。中间也有边框无限拉升,里面要放图片
  • css 设置全屏背景图片

    2021-01-19 16:43:02
    很可惜,CSS2中并没有图片全屏拉伸的属性,所以我自己想了个办法。 利用一个DIV层,在里面装载一个IMG标签。然后设置DIV和IMG的大小为100%,并固定到屏幕最底层,这样就实现了完美的拉伸并最大化图片的目的。 首先...
  • css背景图片拉伸填充的属性

    万次阅读 多人点赞 2015-10-15 09:40:12
    这个背景的长宽值在css2.1之前是不能被修改的。  所以实际的结果是只能重复显示,所以出现了repeat,repeat-x,repeat-y,no-repeat这些属性。就是用来  控制背景图片的显示的。所以一般用作背景图片的有2类: ...
  • 背景图片自适应分辨率浏览器大小自动拉伸全屏代码 代码如下:; width:100%; height:100%; z-index:-1"> ;" src="http://xxxx.com/bg.jpg" height="100%" width="100%" />
  • css background 小技巧
  • CSS控制背景图像平铺,从而实现区域边框阴影的效果,可贵之处是本代码不管你需要阴影的区域是多大,它都能自动适应,个人感觉还不错,具体实现如下建议收藏下哦
  • 话不多说,直接上干货&...背景适配&lt;/title&gt; &lt;/head&gt; &lt;body style="margin: 0px;overflow: hidden;"&gt; &lt;div style="z-index:
  • 总代码如下:body{ background:#000;url("../images/background.jpg") no-repeat center;...}其中为了省代码量,背景颜色及其图片、居中等代码我写在了一行当中如仅需在CSS中显示背景图片则background...
  • django之设置背景图片 CSS 拉伸 平铺

    千次阅读 2018-03-28 11:01:17
    django2.0 背景图片存在static文件夹中1、设置setting.py文件夹。STATIC_URL = '/static/' STATICFILES_DIRS = [ os.path.join(BASE_DIR, 'static'), ]2、在html文件中,加载static文件夹,加入第一行就好了。{% ...
  • 图1作为背景图css可以实现变成图2的效果吗? 图1 <p style="text-align:center"><img alt="" height="45" src="https://img-ask.csdnimg.cn/upload/1622094888561.png" width="51" /></p> 图2 ...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 8,027
精华内容 3,210
关键字:

背景图拉伸css