文档章节

设置背景图片

淘幻幻
 淘幻幻
发布于 2016/10/27 23:34
字数 1584
阅读 16
收藏 0

 

    <style>
        body
        {
            background-image: url('http://www.taohuanhuan.com/cz.jpg');
            background-size: 100% 100%;
        }
    </style>
  • background-size语法

    w3c对background-size的语法规定如下:

    属性名: background-size
    属性值: <bg-size>* 其中 bg-size = [ <length> | <percentage> | auto ]{1,2} | cover | contain
    初始值: auto auto
    应用于: 所有元素
    继承性:
    百分比: 见下文注解
    计算值: 根据指定

    语法解释

    1、length,percentage,根据给定长度值或者百分比来调整背景图片大小。auto为默认值,这三个值最小可重复一次,最大重复两次。对于这些值有以下解释:
    第一个值为设置图片宽度,第二个值为图片的高度;但是不管是用什么值,都不能为负值
    假如只给定一个值,那么第二个自动的为 'auto';
    假如指定为 percentage百分比值,那么背景图大小是根据相对的背景区域来做调整,这个背景区域是由background-origin来来决定的。这在上面已经有提到过了关于图片原点的讨论。这里有必要提到 假如background-attachment:fixed,那么其背景相对区域就是初始包含块也就是视窗。

    /* 一个值: 这个值指定图片的宽度,那么第二个值为auto */
    background-size: auto
    background-size: 50%
    background-size: 3em
    background-size: 12px
    
    /* 两个值: 第一个值指定图片的宽度,第二个值指定图片的高度 */
    background-size: 50% auto
    background-size: 3em 25%
    background-size: auto 6px
    background-size: auto auto
    /*多重背景,请用逗号隔开,在CSS语法中凡语法后跟*或者#,都是可以无限重复的,但是必须用逗号隔开。 */
    background-size: auto, auto     /* 不要跟background-size: auto auto混淆了 */
    background-size: 50%, 25%, 25%
    background-size: 6px, auto, contain
    
    background-size: inherit

    2、contain,按比例调整背景图片,使得其图片宽高比自适应整个元素的背景区域的宽高比,因此假如指定的图片尺寸过大,而背景区域的整体宽高不能恰好包含背景图片的话,那么其背景某些区域可能会有空白。看以下代码

    .im-com{
        width:200px;
        height:50px;    
        background:url(http://img.xiaoho.com/mystar/mada4.jpg) no-repeat top left scroll;   /*图片的宽高为440*440,而元素相对区域高度为50*/ 
        background-size:contain;
    }
    .im-com-1{
        width:50px;
        height:100px;   
        background:url(http://img.xiaoho.com/mystar/mada4.jpg) no-repeat top left scroll;   /*元素相对区域宽度为50*/ 
        background-size:contain;
    }
    当图片恰好自适应铺满元素的宽度或者高度,那么元素的会有空白处存在,也就是图中红色框框都显示了空白。

    2、cover,按比例调整背景图片,这个属性值跟contain正好相反,背景图片会按照比如自适应铺满整个背景区域。假如背景区域不足以包含背景图片的话,那么背景图片就会被咔嚓。

    .im-com{
        width:200px;
        height:50px;    
        background:url(http://img.xiaoho.com/mystar/mada4.jpg) no-repeat top left scroll;   /*图片的宽高为440*440,而元素相对区域高度为50*/ 
        background-size:cover;
    }
    .im-com-1{
        width:50px;
        height:100px;   
        background:url(http://img.xiaoho.com/mystar/mada4.jpg) no-repeat top left scroll;   /*元素相对区域宽度为50*/ 
        background-size:cover;
    }
    当使用了 cover 这个值的时候,那么正好就跟contain相反,其会正好覆盖整个背景相对区域,但是背景图片的某些部分就看不见,如下图的狗的下半身和右侧身体显示不全。

    说说背景图片计算值

    假如说只是拿单一的数值或者具体数值来解释那理解起来应该不难,但假如用混合长度来说,可能会有点一下子明白不上来。

    规范给了几个例子,不妨拿出来一下:先声明,所以的元素尺寸为 100*100

    100% 100%背景图片将铺满整个内容区,假如说元素有固有宽高,那么背景图片铺满整个100*100背景区域
    
    div {
        background-image: url(plasma.png);
        background-repeat: no-repeat;
        background-size: 100% 100%;
        background-origin: content-box }
    背景图片调整为宽度为50*50,但是背景图片的原点位置为边框box而不是padding-box
    p {
        background-image: url(tubes.png);
        background-size: 50% auto;
        background-origin: border-box }
    背景图片尺寸调整为15*15
    para {
        background-size: 15px 15px;
        background-image: url(tile.png)}
    这是默认值,也就是auto auto,此时背景图片的尺寸将会是跟图片的固有尺寸一样.
    
    body {
        background-size: auto;            /* 默认值 */
        background-image: url(flower.png) }
    假如两个都是百分比,此时图片就会根据背景区域来按照宽高比自适应,此处背景图片为20*30,但是因为背景重复用了 'round'循环,因此背景区域高度划分了3个33.3等高区域,所以背景图片会自适应调整为20*33.3
    p {
        background-image: url(chain.png);
        background-repeat: no-repeat round;
        background-size: 20% 30% }

    在MND帮助文档中还提到了关于火狐的渐变图片背景问题,不过那是涉及到Firefox8,规范中不推荐同时使用px和auto,因为在8以前的火狐浏览器不支持重复渲染,但是我在caniuse上看见的版本是31+,so,你就尽情的用吧。并且对于移动浏览器的支持还是非常的好的,请看下图可知,除了opera8部分不支持以外:

     

    应用场景

    目前用到 background-size的场景都是基于webapp的背景图上,大致的情况是,比如说最常见的logo作为某个元素的背景,但logo很复杂,假如说我们按照设计图上的去切片的话,那会有两种可能:
    1、按照csser的分辨率去切片,比如高度为50px,logo被直接缩放到50px那就会很别扭,而且估计那那画面太美,你都不敢看;
    2、按照射击湿设计的分辨率去切的话,有可能设计图的logo尺寸会很大,但是我们csser写的时候高度只有50px,那logo就会显示不全;

    这时候background-size就发挥其重要的作用了,我们可以通过对背景图片大小的自适应缩放,而不会影响到起美观性又能全部显示我们所需要的效果.

  • 部分内容来自:◎前端路人乙xiaoho.com

  • 最后还一个可以设置背景图片的,但是好像,我做的有问题,留做以后研究、

  • <div id="formbackground" style="position:absolute; z-index:-1;"><img src="10.jpg" height="100%" width="100%"/></div>
    <script type="text/javascript">
    $(function(){
        $('#formbackground').height($(window).height());
        $('#formbackground').width($(window).width());
    });
    </script>
    <script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js"/>
    

     

本文转载自:

淘幻幻
粉丝 2
博文 83
码字总数 36551
作品 0
徐州
程序员
私信 提问
html5中关于背景的介绍

一:背景颜色 背景颜色一共有四种取值方式,分别为具体颜色值单词,rgb,rgba以及十六进制具体如下所示: 二:背景图片 如何设置背景图片呢?? CSS中有一个叫做background-image:url();的属...

随风流年
2017/07/27
0
0
Word或者WPS里证件照的背景底色和像素调整

证件照的背景底色调整和像素调整 关于证件照的背景底色自行调整,比较方便的方法是用Word或者WPS来进行调整,当然也可以利用两者相结合的方法来进行调整,下面来系统的说一下这两种方式。此外...

OnlyYan
2018/09/27
0
0
[实践总结]纯css实现动态边框

背景 这几天工作中遇到一个交互需求,要求实现一个效果,当鼠标移入一个元素的时候,元素出现一个动态的边框,如图: 思路 看到这个效果,我首先想到的是设置元素的border属性,可惜border不...

快狗打车前端团队
05/15
0
0
CSS中的background背景和应用

我们在操作盒子的时候 一般都会用到背景图片或者背景颜色等属性 1. 背景图片 2. 如果只设置背景图片,盒子的宽度和高度大于图片的真实大小,图片默认是的 ,这是要用到这个属性来更改设置 这...

追逐iOS
07/10
0
0
CSS 的 background 属性小结

background有8个属性控制,可以简写成一个 1.background-color background-color属性设置背景元素的 背景颜色,可以设置透明 给透明背景颜色家一个边框方便查看 2.background-image backgro...

追逐iOS
2018/08/03
0
0

没有更多内容

加载失败,请刷新页面

加载更多

Spring Boot + Mybatis-Plus 集成与使用(二)

前言: 本章节介绍MyBatis-Puls的CRUD使用。在开始之前,先简单讲解下上章节关于Spring Boot是如何自动配置MyBatis-Plus。 一、自动配置 当Spring Boot应用从主方法main()启动后,首先加载S...

伴学编程
昨天
7
0
用最通俗的方法讲spring [一] ──── AOP

@[TOC](用最通俗的方法讲spring [一] ──── AOP) 写这个系列的目的(可以跳过不看) 自己写这个系列的目的,是因为自己是个比较笨的人,我曾一度怀疑自己的智商不适合干编程这个行业.因为在我...

小贼贼子
昨天
7
0
Flutter系列之在 macOS 上安装和配置 Flutter 开发环境

本文为Flutter开发环境在macOS下安装全过程: 一、系统配置要求 想要安装并运行 Flutter,你的开发环境需要最低满足以下要求: 操作系统:macOS(64位) 磁盘空间:700 MB(不包含 IDE 或其余...

過愙
昨天
6
0
OSChina 周六乱弹 —— 早上儿子问我他是怎么来的

Osc乱弹歌单(2019)请戳(这里) 【今日歌曲】 @凉小生 :#今日歌曲推荐# 少点戾气,愿你和这个世界温柔以待。中岛美嘉的单曲《僕が死のうと思ったのは (曾经我也想过一了百了)》 《僕が死の...

小小编辑
昨天
2.5K
16
Excption与Error包结构,OOM 你遇到过哪些情况,SOF 你遇到过哪些情况

Throwable 是 Java 中所有错误与异常的超类,Throwable 包含两个子类,Error 与 Exception 。用于指示发生了异常情况。 Java 抛出的 Throwable 可以分成三种类型。 被检查异常(checked Exc...

Garphy
昨天
42
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部