css属性background
一、background-size
1.具体设定的px值,及北背景图片的具体宽高
2.设定的百分比,相对于容器的宽高
3.设定三个铺设类型:
(1)cover: 以宽 / 高 为基本,尽可能的去铺满整个容器,溢出部分截掉
(2)contain:以宽 / 高 为基本,尽可能的去铺满整个容器,但要求不能溢出容器
二、background-repeat: repeat / no-repeat; 一张图片无法铺满整个容器时,是否重复图片平铺
三、background-position:
1、具体两个px值,设定的为相对于容器左上角的偏移值
2、两个百分比值: 计算公式为 (容器的宽度 - 背景图片的宽度) * 百分比 ,高度类推即可
3.left, right, top, bottom, 分别相当于 第一个百分比的 0% ,100%,第二个百分比的 0%,100%
4.center, 相当于百分比的50%
注意: background-position必须要写两个值,不能系一个值来代替两个相同的值
css属性background的更多相关文章
- css属性 background
background 在一个声明中设置所有的背景属性. background-attachment 设置背景图像是否固定或者随着页面的其余部分滚动. background-color 设置元素的背景颜 ...
- css中background背景属性概
css中background背景属性概 background:url(背景图片路径) no-repeat;/*不重复默认在左上方*/background:url(背景图片路径) no-repeat ...
- CSS背景属性Background详解
[转] 本文详解了CSS的背景属性Background,包括CSS3中新增的背景属性.如果你是个CSS初学者,还可以查看之前介绍的CSS浮动属性和CSS透明属性详解. CSS2 中有5个主要的背景(b ...
- CSS下背景属性background的使用方法
背景颜色(background-color) CSS可以用纯色来作为背景,也可以将背景设置为透明,background相当于xhtml中的bgcolor. 它的两个值: transparent(默认值 ...
- CSS中background属性详解
CSS背景属性 background css 说明 background-image:url(图片的网址); 背景图 background: url( 图片的网址 ); 背景 background-c ...
- 前端CSS-font属性,超链接的美化,css精灵,background综合属性
前端CSS-font属性,超链接的美化,css精灵,background综合属性 1. font属性 使用font属性,能够将字号.行高.字体,能够一起设置. font:14px/24px " ...
- CSS代码示例-背景属性(background)
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- CSS基础-background的那些属性
background的那些属性 background:背景的意思常用的六个属性 1.background-color:背景颜色 2.background-image:背景图像 3.background ...
- 通过设置CSS属性让DIV水平居中
通过设置CSS属性让DIV水平居中 ---------------------- <html> <head> <title></title> <m ...
随机推荐
- docker教程之从一头雾水到不一头雾水(2)
书接上文:docker教程之从一头雾水到不一头雾水(1) 运行镜像 先查看下本地有哪些镜像 [root@ichz ~]# docker images REPOSITORY TAG IMAGE ID C ...
- URL重写:Rewirte模块原理详解
Apache+PHP+MySQL Rewirte主要的功能就是实现URL的跳转和隐藏真实地址,基于Perl语言的正则表达式规范.平时帮助我们实现拟静态,拟目录,域名跳转,防止盗链等.本文将针对mod_ ...
- 求重集的r-组合
具体的就不在这里说了,如果有兴趣的可以把我的工程包下载下来看,留个URL http://pan.baidu.com/s/1bnes1HX
- bzoj4069【APIO2015】巴厘岛的雕塑
4069: [Apio2015]巴厘岛的雕塑 Time Limit: 10 Sec Memory Limit: 64 MB Submit: 192 Solved: 89 [Submit][Stat ...
- linux系统寻找僵尸进程
1. 用top命令来查看服务器当前是否有僵尸进程. 2. 用ps和grep命令寻找僵尸进程 $ ps -A -ostat, pid, ppid, cmd | grep -e '^[Zz]' 命令解释: ...
- 如何在Windows 10 IoT Core中添加其他语言的支持,如中文
目前很多开发者已经开始使用Windows 10 IoT来做物联网领域的开发了,目前Windows 10 IoT Core的版本支持树莓派2(以及新出的树莓派3).Minnowboard Max以及Dr ...
- JS中单引號/双引號以及外部js引入的一些问题
一.单引號和双引號的使用方法的问题 在JavaScript中能够使用单引號.双引號.二者也能够混合使用. 可是,身为菜鸟的我,却碰到了一些引號的使用问题. <body> <div s ...
- hibernate 注解之 SequenceGenerator
hibernate 注解之 SequenceGenerator https://blog.csdn.net/zgf19930504/article/details/54694807 JPA @Id 和 ...
- DM8168 自己主动登录root用户
①指定连接: <DM8168># ln -s /bin/busybox /sbin/getty ②改动/etc/inittab文件: <DM8168># vi /etc/ini ...
- Lumen开发:结合Redis实现消息队列(3)
4.运行队列监听器 开启任务监听器 Lumen包含了一个Artisan命令用来运行推送到队列的新任务.你可以使用queue:listen命令运行监听器: php artisan queue:liste ...