zoukankan      html  css  js  c++  java
  • html元素背景样式大小调整

    定义元素背景设置 background-size属性cover自适应填充背景,background-size: 100% 100%; background-size: 左右比例  上下比例;

    再介绍几个特殊属性:

    background-clip :

    background-origin :

    background-size :背景尺寸。

    background-break :

     IE兼容background-size添加下面属性

     filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(
        sizingMethod='scale');
    ——————————————————————以下兼容谷歌/IE————————————————————————————
    如要保留原图片比例
    background-size: cover;
    拉伸到和容器一样大小
      sizingMethod='scale'
    全填充则设置为
    background-size: 100% 100%;
     

    <!DOCTYPE html>

    <html>
    <head>
    <meta charset="UTF-8">
    <title>让IE兼容background-size的方法</title>
     
    <style>
    .bgpic {
        background-size: cover;
        filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(
        sizingMethod='scale');
    }
    </style>
    </head>
    <body>
     
        <div  class="bgpic" style="200px;height:100px;"></div>
     
    </body>
    </html>
    兼容最好,最强大的一种用Image充当背景。
    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="UTF-8">
    <title>用img标签实现补充全屏效果</title>
    <style>
    body{
      position: absolute;
      overflow:hidden;
         width: 100%;
         height: 100%;
         left: 0px;
         top: 0px;
         z-index: 0;
    }
    </style>
    </head>
    <body >
    <img runat="server" id="stretch" src="http://img0.bdstatic.com/img/image/6992fdda3cc7cd98d10273a6b34233fb80e7aec90cc.jpg" style=" 100%; height:100%;position: absolute;z-index: -1;" /> 
    </body>
    </html> 
  • 相关阅读:
    线程
    进程2
    进程
    socketserver
    黏包
    初始网络编程
    模块
    super
    mro c3算法
    日志固定格式
  • 原文地址:https://www.cnblogs.com/loyung/p/3924550.html
Copyright © 2011-2022 走看看