css设置背景图片自适应
CreateTime--2017年12月25日16:36:07
Author:Marydon
控制背景图片100%自适应填充布局
/* 控制背景图片100%自适应填充布局 */
body{
background-image: url(java八种基本数据类型介绍.png);
background-size:100% 100%;
/* firefox 浏览器 */
-moz-background-size:100% 100%;
/* Safari 浏览器 */
-webkit-background-size:100% 100%;
/* ie8及以下有效 */
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='java八种基本数据类型介绍.png',sizingMethod='scale');
}
说明:
1.Firefox,Safari,ie8及以下需要对私有属性进行特殊声明;
2.针对背景图片与容器的大小不一致时,需要设置的属性值也是不一样的。
详细介绍请移步至文章:background-size 和 css 滤镜之AlphaImageLoader。
css设置背景图片自适应的更多相关文章
- img只显示图片一部分 或 css设置背景图片只显示图片指定区域
17:14 2016/3/22img只显示图片一部分 或 css设置背景图片只显示图片指定区域 background-position: 100% 56%; 设置背景图片显示图片的哪个坐标区域,图片左 ...
- css 设置背景图片模糊,内容不模糊
需求:一个div设置了background: url,现在需要使图片背景模糊,div内的文字清晰显示. 原始代码: <!DOCTYPE html> <html lang=" ...
- bootstrop设置背景图片自适应屏幕
如果不用bootstrop框架,想让背景图片自适应窗口大小,可以这样做: <style type="text/css"> html{height: %;} body.a ...
- css设置背景图片,ie显示不了
本来是想给导航栏<div class="nav"></div>添加背景图片的,设置css样式如下: .nav{background:url("ht ...
- (转)background-position—CSS设置背景图片的位置
background-position :在 CSS 中通过 background-position 属性可以调整背景图片的位置.因为在默认情况下背景图片都是从设置了 background-posit ...
- 使用CSS设置背景图片,图片比较大,完全显示在一个DIV中
做的时候想要边框为比较好看的样式,需要UI切图并且放在div中,看起来会好看点 像这样的,我随便挑选了一个,UI帮我切图出来 需要把这个图片填到相应的div里面,但是很显然碰到一个问题,图片太大,而且 ...
- css 设置背景图片透明
最终效果: 背景图片css不变,再背景图片的里层元素设置css样式即可 opacity:0.4; filter:alpha(opacity=40); /* 针对 IE8 以及更早的版本 */
- css设置背景图片
background:pink;图片在背景图上面 background-image:url(food.jpg);一张图片铺满一行background-repeat:repeat-x;同一张图片多张铺满 ...
- css 设置背景图片铺满固定不动
#page{ position: relative; width: 100%; height: 100%; background-image:url(../img/bg.JPG); backgroun ...
随机推荐
- Codeforces Round #877 (Div. 2) E. Danil and a Part-time Job
E. Danil and a Part-time Job 题目链接:http://codeforces.com/contest/877/problem/E time limit per test2 s ...
- Ubuntu桌面主题设置以及优化
安装好Ubuntu后,觉得桌面不太美观,便动了修改主题的想法.听说Flatabulous不错,在网上搜索看过主题效果后也觉得蛮不错的,于是准备修改. 安装Unity Tweak Tool Unity ...
- GitHub中国区前100名到底是什么样的人?(转载)
本文根据Github公开API,抓取了地址显示China的用户,根据粉丝关注做了一个排名,分析前一百名的用户属性,剖析这些活跃在技术社区的牛人到底是何许人也!后续会根据我的一些经验出品<技术人员 ...
- wp8 longlistselector 动态加载datatemplate
在做一个windows phone 8 即时通讯应用的时候,聊天界面的对话气泡. 需要根据不同的消息类型,加载对应的DataTemplate, 比如发送,接受,图片,语音,等气泡. 如下图所示 会话界 ...
- ubuntu14.04:php7+apache2+mysql
apache2: sudo apt-get install apache2 apache2-dev service apache2 start mysql: sudo apt-get install ...
- BZOJ 3143 [Hnoi2013]游走 ——概率DP
概率DP+高斯消元 与博物馆一题不同的是,最终的状态是有一定的概率到达的,但是由于不能从最终状态中出来,所以最后要把最终状态的概率置为0. 一条边$(x,y)$经过的概率是x点的概率$*x$到$y$的 ...
- 算法复习——差分约束(ssoi种树)
题目: 题目描述 为了绿化乡村,H 村积极响应号召,开始种树了. H 村里有 n 幢房屋,这些屋子的排列顺序很有特点,在一条直线上.于是方便起见,我们给它们标上 1-n .树就种在房子前面的空地上. ...
- java面试题之什么是死锁、活锁、饿死和竞态条件?
死锁:是指两个或两个以上的进程(或线程)在执行过程中,因争夺资源而造成的一种相互等待的现象,若无外力作用,他们将无法推进下去: 活锁:是指两个线程优先级相同,都礼让不走,就这样一直僵持下去: 饿死:在 ...
- hdu4336 Card Collector(概率DP,状态压缩)
In your childhood, do you crazy for collecting the beautiful cards in the snacks? They said that, fo ...
- Redis命令行之Zset
一.Redis之Zset简介 1. 有序集合Zset是String类型的有序集合. 2. Zset中每个元素都会关联一个double类型的分数值,redis通过分数值来为集合中所有成员进行从小到大排序 ...