认识CSS3中的背景

前端之HTML5,CSS3(七)

  背景缩放

  CSS3中背景用于手机端需要分系统:ios系统和android系统。对于iso系统,需要背景是2倍宽高像素的背景图,然后背景缩放,如此在ios系统中打开才会不导致图片失真。简单来说,就是ios系统自带背景放大功能,当设置背景为原图大小时,ios系统打开会对背景图片进行2倍放大,然而一般像素放大会产生失真效果,即模糊效果。因此,需要对背景先缩小,再通过ios系统打开,即为原图大小。

  background-size属性

  通过background-size属性设置背景图片大小,如同HTML中img通过css设置width和height一般。属性值:长度(px)或者百分比,cover,contain。

  长度或者百分比:设置长度或者百分比时,background-size设置两个值,分别为宽(width)和高(height),基本语法为background-size: mpx npx,其中m为宽,n为高。此外,设置百分比属性需要根据容纳背景的盒子来作为参照,如background-size: 50% 100%,表示背景图片设置宽度为盒子宽度的一半,高度与盒子高度相同。注意,当background-size只设定一个属性值时,另一个缺省值为auto,表示按照设定值与原始背景图片尺寸大小比例进行等比例缩放。

  cover:设置方式为background-size: cover;表示背景图片的宽和高会按照相同比例一直缩放,直到宽和高都铺满整个背景盒子为止。如果宽先于高铺满整个背景盒子,宽仍旧会继续缩放,直到高铺满整个盒子的高度时,宽和高同时停止缩放,背景图片的宽会溢出盒子,而溢出盒子的部分会自动隐藏。反之,高先于宽时,亦是如此。

  contain:设置方式为background-size: contain;表示背景图片的宽和高也会按照相同比例一直缩放,直到宽或者高中的一个铺满盒子为止。如果高先于宽铺满盒子,则当高铺满盒子的时候,宽和高同时停止缩放。反之,宽先于高时,亦是如此。

原文地址:https://www.cnblogs.com/snow-lanuage/p/10865028.html

时间: 2024-10-19 06:22:54

认识CSS3中的背景的相关文章

CSS3边框与背景

参考: http://www.runoob.com/css3/css3-tutorial.html CSS3被拆分为"模块".旧规范已拆分成小块,还增加了新的. 一些最重要CSS3模块如下: 选择器 盒模型 背景和边框 文字特效 2D/3D转换 动画 多列布局 用户界面  1.CSS3边框: 用 CSS3,你可以创建圆角边框,添加阴影框,并作为边界的形象而不使用设计程序,如 Photoshop. 在本章中,您将了解以下的边框属性: border-radius box-shadow bo

理解CSS3中的background-size(对响应性图片等比例缩放)

2016-03-10 01:40 by 空智, 7463 阅读, 8 评论, 收藏, 编辑 阅读目录 background-size的基本属性 给图片设置固定的宽度和高度的 固定宽度400px和高度200px-使用background-size:400px 200px缩放设置 固定宽度400px和高度200px-使用background-size:400px;的缩放设置,那么第二个参数会自动转换为auto 固定宽度400px和高度200px-使用background-size:100% 100%

CSS3中的动画功能

CSS3中的动画功能分为Transitions功能和Animations功能,这两种功能都可以通过改变CSS中的属性值来产生动画效果. 1.Transitions功能通过将元素的某个属性从一个属性值在指定时间内平滑过渡到另一个属性值来实现动画功能.transition属性的用法如下: transition:property duration timing-function; 其中,property表示对哪个属性平滑过渡,取值可以是“background-color”.“color”.“width

聊聊CSS3中的transition

W3C标准中对CSS3的transition是这样描述的: CSS的transition允许CSS的属性值在一定的时间区间内平滑地过渡.这种效果可以在鼠标单击,获得焦点,被点击或对元素任何改变中触发,并圆滑地以动画效果改变CSS的属性值.简洁点说就是当元素从一种样式变换为另一种样式时为元素添加效果. transition主要有***四个属性***,那这四个属性怎么记呢?变换的话总得有变换的属性名吧,知道是要哪个属性变,还得有变换的持续时间吧,持续时间里还得有变换速率吧,是先快后慢呢还是先慢后快呢

CSS3中渐变gradient详解

这几天看了一本HTML5的书,里面对于页面的背景使用了大量的渐变效果,因此在这里写一些关于渐变Gradient的东西. CSS3中的Gradient有两种,分别是线性渐变(linear-gradient)和径向渐变(radial-gradient),下面分别是线性与径向渐变的效果(用Flash画的,习惯了 O(∩_∩)O哈哈~.?) 首先说一下webkit的浏览器(谷歌的Chrome啊等等) webkit下对于Gradient定义了两种方法: -webkit-linear-gradient -w

css3中新增的一些有用的选择器

css3中新增呢很多新的玩意!有的东西玩着玩着就会被玩坏(呵呵,只是没什么用很鸡助),这来总结下我认为有用的, 不喜勿喷!有错误就请指出!绝对自己总结的,不当伸手党! 属性选择器: div[index]{background:red}    表示div下面带index属性的背景为红色 div[index=a]{background:red}  表示div下面的自定义属性index=a的div的颜色变成红色. div[index~=a]{background:red}    只要div中index

CSS3中的background-size(对响应性图片等比例缩放)

background-size的基本属性 background-size: 可以设定背景图像的尺寸,该属性是css3中的,在移动端使用的地方很多,比如最常见的地方在做响应性布局的时候,比如之前做的项目中有轮播图片,为了自适应不同大小分辨率的图片,我门需要使用css3中的媒体查询来针对不同的分辨率设置宽度和高度,虽然这种方式是可以解决问题,但是解决方式并不是太好,并且很繁琐,当然我门也想过直接使用百分比设置图片的大小,比如width(宽度): 100%,height(高度):100%; 但是设置图

css3实现网格背景,background-image,background-size

用纯css3实现网格背景,应该怎么做呢? 需要给容器设置background-image,background-size属性 .container{ background-image: linear-gradient(90deg, rgba(200, 0, 0, 0.15) 10%, rgba(0, 0, 0, 0) 10%), linear-gradient(rgba(200, 0, 0, 0.15) 10%, rgba(0, 0, 0, 0) 10%); background-size: 1

Html5 与CSS3中的新特性

Html5 绘画 canvas 元素 用于媒介回放的 video 和 audio 元素 本地离线存储 localStorage 长期存储数据,浏览器关闭后数据不丢失: sessionStorage 的数据在浏览器关闭后自动删除 语意化更好的内容元素,比如 article.footer.header.nav.section 表单控件,calendar.date.time.email.url.search CSS3 CSS3实现圆角(border-radius),阴影(box-shadow), 对文