zoukankan      html  css  js  c++  java
  • 使用css实现背景图片无重复填充

    在给一个div设置背景图片的时候,如果div的宽高要大于图片,代码如下:

    <!DOCTYPE html>
    <html>
        <head>
            <meta charset="UTF-8">
            <title></title>
        </head>
        <body>
            <div style="border: 1px solid black; background-image: url(img/people.jpg); 1500px;height: 1500px;"></div>
        </body>
    </html>

    效果图:

    如果不需要图片重复,可以使用  background-repeat: no-repeat;

    代码如下:

    <!DOCTYPE html>
    <html>
        <head>
            <meta charset="UTF-8">
            <title></title>
        </head>
        <body>
            <div style="border: 1px solid black; background-image: url(img/people.jpg); 1500px;height: 1500px;background-repeat: no-repeat;"></div>
        </body>
    </html>

    重复的问题解决了,但是其余的部分被白色的背景填充了,再加入background-size: 100% 100%;就可以让图片平铺整个div了(如果宽高比例和div的宽高比例不一样,图片会扭曲。。)

    <!DOCTYPE html>
    <html>
        <head>
            <meta charset="UTF-8">
            <title></title>
        </head>
        <body>
            <div style="border: 1px solid black; background-image: url(img/people.jpg); 1500px;height: 1500px;background-repeat: no-repeat;background-size: 100% 100%;"></div>
        </body>
    </html>

  • 相关阅读:
    mybatis常用的配置解析
    shiro学习(一)
    三、maven学习-高级
    二、maven学习
    一、maven学习
    常用工具类
    三、redis学习(jedis连接池)
    一、redis学习(基础)
    校验用户名是否存在(ajax+jackson)
    Spring-简介-IOC理论推导
  • 原文地址:https://www.cnblogs.com/mayiaction/p/10656149.html
Copyright © 2011-2022 走看看