CSS3 background-size图片自适应

CSS3 background-size图片自适应

http://www.html5cn.com.cn/css3/2013-04-21/267.html

background-size属性和background-origin属性、background-clip属性一 样,也是CSS3对于background新增加的属性。它的作用是指定背景图片的大小,比如:对于一个div块,我们需要为它添加一张图片作为背景,然 而图片大小并非总能尽如人意,但我们又不想使用background-repeat属性让背景平铺,那么这时我们就可以使用background- size属性使图片放大或者是缩小来适应div块,当然这也可能会造成背景图的失真。

下面我们就先从它的语法说起吧:

background-size :[ | | auto ]{1,2} | cover | contain ;

这 个属性有2个可选值,第1个值用于指定背景图的宽width,第2个值用于指定背景图的高height,如果只设定1个值,则第2个值默认为自动 auto。这两个值可取数字(单位为px)也可以取百分比,当指定为百分比时,大小会由所在区域的宽度、高度,以及background-origin的 位置决定,当然还可以通过cover和contain来对图片进行伸缩。

cover:用于等比放大背景图

contain:用于等比缩小背景图(背景图需大于块,否则背景图仍会被放大以适应块)

auto:默认值

下面我们就用实例来看一下它们的效果吧

首先看一下初始代码及效果

HTML代码:

1
2
3
<</code>div class="div1">
    
BeyondWeb.cn-记录与分享前端开发的点点滴滴
</</code>div>

CSS代码:

1
2
3
4
5
6
7
8
9
.div
1
{
    
width
:
200px
;
    
height
:
100px
;
    
color
:
#fff
;
    
font-size
:
12px
;
    
border
:
10px
dotted
#333
;
    
padding
:
10px
;
    
background
:
#666
url
(girl.jpg)
no-repeat
;
}

初始效果图:

1、background-size取固定值

CSS代码:

1
2
3
4
5
6
7
8
.div
1
{
    
...
    
-moz-background-
size
:
200px
100px
;
    
-webkit-background-
size
:
200px
100px
;
    
-o-background-
size
:
200px
100px
;
    
background-
size
:
200px
100px
;
    
...
}

效果图:

2、background取百分比

CSS代码:

1
2
3
4
5
6
7
8
.div
1
{
    
...
    
-moz-background-
size
:
90%
60%
;
    
-webkit-background-
size
:
90%
60%
;
    
-o-background-
size
:
90%
60%
;
    
background-
size
:
90%
60%
;
    
...
}

效果图:

3、background取cover

CSS代码:

1
2
3
4
5
6
7
8
.div
1
{
    
...
    
-moz-background-
size
:cover;
    
-webkit-background-
size
:cover;
    
-o-background-
size
:cover;
    
background-
size
:cover;
    
...
}

效果图:

为了填满背景,此时是把原图等比放大了

4、background取contain

CSS代码:

1
2
3
4
5
6
7
8
.div
1
{
    
...
    
-moz-background-
size
:contain;
    
-webkit-background-
size
:contain;
    
-o-background-
size
:contain;
    
background-
size
:contain;
    
...
}

效果图:

此时图片并没有缩小,反而被放大了,其实这是因为原背景图比div块小的原因,那么如果我们照一张大一点的图片,那么会是什么效果呢?现在拿一张比上面div块大的多的图片试一试,CSS代码是不变的,来看一下效果:

这时,背景图片被等比例缩小了,以适应div块。

5、background取auto

CSS代码:

1
2
3
4
5
6
7
8
.div
1
{
    
...
    
-moz-background-
size
:
auto
;
    
-webkit-background-
size
:
auto
;
    
-o-background-
size
:
auto
;
    
background-
size
:
auto
;
    
...
}

效果图:

auto是默认值,这和初始效果是一样的,背景图片不做任何的放大或者是缩小。

好了,background-size属性就说这么多。

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/114265.html原文链接:https://javaforall.cn

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(0)


相关推荐

  • C#使用WebProxy实现代理访问webservice

    C#使用WebProxy实现代理访问webservice1.问题描述标题写的有点含糊不清,不好意思语言表达能力欠佳。。事情是这样的!事情是这样的,在A服务器上有一个webservice,B计算机和C计算机都可以ping通A服务器,但是C计算机的ip备案了而B计算机的ip没有备案,导致我写的一个小程序放在B计算机上调用A服务器的webservice的时候提示我ip非法。那么该如何让这个小程序能在B计算机上正常使用呢?答案是代理服务器!2.w…

  • java dom4j读取xml_java dom4j解析xml用到的几个方法

    java dom4j读取xml_java dom4j解析xml用到的几个方法搜索热词1.读取并解析XML文档:SAXReaderreader=newSAXReader();Documentdocument=reader.read(newFile(fileName));reader的read方法是重载的,可以从InputStream,File,Url等多种不同的源来读取。得到的Document对象就带表了整个XML。读取的字符编码是按照XML文件头定义的编…

  • Java学习之EL与JSTL篇

    Java学习之EL与JSTL篇0x00前言继续来更新Java的学习记录。0x01EL表达式EL的全称是ExpressionLanguage是一种表达式语言,该语言主要用于替换jsp页

    2021年12月12日
  • 极客日报:雷军:小米高端手机正式对标苹果;腾讯要求抖音为《斗罗大陆》赔偿8亿;Ember 4.0发布[通俗易懂]

    极客日报:雷军:小米高端手机正式对标苹果;腾讯要求抖音为《斗罗大陆》赔偿8亿;Ember 4.0发布[通俗易懂]一分钟速览新闻点!雷军:小米高端手机正式开始对标苹果腾讯要求抖音为《斗罗大陆》赔偿8亿乐视宣布涨工资首个国产元宇宙!百度沉浸式虚拟社交App希壤开放内测AI大牛沈春华回国加盟浙江大学腾讯怪兽工作室招聘大量开发岗位:将开发“4A”多人FPS大作余承东称智能汽车正迎来黄金时代微软收购AT&T广告部门:迎接“后Cookie”时代谷歌称ChromeOS是全球发展最快的操作系统微软160亿美元收购Nuance获欧盟批准苹果开始在印度试产iPhone13,预计明年2月开始正式量独占策

  • mysql如何进行分区_mysql如何进行分区_mysql分区有哪些方法「建议收藏」

    mysql如何进行分区_mysql如何进行分区_mysql分区有哪些方法「建议收藏」MySQL可应用于多种语言,包括PERL,C,C++,JAVA和PHP。在这些语言中,MySQL在PHP的web开发中是应用最广泛。大家知道mysql如何分区的吗?下面由学习啦小编为大家整理的mysql分区的方法,希望大家喜欢!mysql分区的方法一、概述当MySQL的总记录数超过了100万后,会出现性能的大幅度下降吗?答案是肯定的,但是,性能下降>的比率不一而同…

  • navcat激活码【在线注册码/序列号/破解码】

    navcat激活码【在线注册码/序列号/破解码】,https://javaforall.cn/100143.html。详细ieda激活码不妨到全栈程序员必看教程网一起来了解一下吧!

发表回复

您的电子邮箱地址不会被公开。

关注全栈程序员社区公众号