CSS实现背景图尺寸不随浏览器缩放而变化
方法一. 把图片作为background,方法二使用img标签。同时要有一张足够大尺寸的图片。
方法一. 把图片作为background
有几个CSS的属性要提一下:background-size:cover,这个CSS3的属性作用是把背景图像扩展至足够大,以使背景图像完全覆盖背景区域,背景图像的某些部分也许无法显示在背景定位区域中,如果不使用这个属性,在IE11和FireFox中缩放浏览器,背景图片会随之缩小,同时使用-webkit-background-size: cover和-o-background-size: cover兼容webkit内核浏览器和Opera浏览器;background-attachment属性设置背景图像是否固定或者随着页面的其余部分滚动,当设置为fixed时页面的其余部分滚动时,背景图像不会移动。
div{
position:absolute;
top:;
left:;
height:100%;
width:100%;
background-image:url("maskimg/star.jpg");
background-position: center 0;
background-repeat: no-repeat;
background-attachment:fixed;
background-size: cover;
-webkit-background-size: cover;/* 兼容Webkit内核浏览器如Chrome和Safari */
-o-background-size: cover;/* 兼容Opera */
zoom:;
}
方法二.不把图片作为背景,而是使用<img>标签,
效果是图片尺寸不会随浏览器缩放而变化,但是如果有竖直滚动条时,图片不会固定而会随滚动条移动。只需要把图片的宽度width设置成100%就行了。
<div><img id="pic" src="maskimg/star.jpg"></div>
#pic{ width:100%;}
如果图片没有那么大,则需:
<img src="data:images/bodyBg.png" class="bodyBg" />
.bodyBg {
position: fixed;
width: 100%;
height: 100%;
left: 0;
top: 0;
z-index: -1;
}
CSS实现背景图尺寸不随浏览器缩放而变化的更多相关文章
- CSS 实现背景图尺寸不随浏览器缩放而变化
<!-- Author:博客园小dee --> 一些网站的首页背景图尺寸不随浏览器缩放而变化,例如百度个人版的首页,缩放后背景图的尺寸并不改变: 再比如花瓣网( http://www.hu ...
- CSS实现背景图尺寸不随浏览器大小而变化的两种方法
一些网站的首页背景图尺寸不随浏览器缩放而变化,本例使用CSS 实现背景图尺寸不随浏览器缩放而变化,方法一. 把图片作为background,方法二使用img标签.喜欢的朋友可以看看 一些网站的首页 ...
- 【学习进步之路】-【浏览器兼容】透明背景图IE、360浏览器不兼容
最近在项目中遇到了浏览器兼容问题,透明背景图在IE或360兼容模式下没有效果,以前都是网上搜到结果,直接用了,并没有深入的去理解和利用,总会在下一次使用的时候忘记.为了让自己在前端方面学习更有成效,想 ...
- css(html)背景图优化合并
图片本身的优化: 图像质量要求和图像文件大小决定你用什么格式的图片,用较小的图片文件呈现较好的图像质量. 当图片色彩过于丰富且无透明要求时,建议采用jpg格式并保存为较高质量. 当图片色彩过于丰富又有 ...
- css固定背景图位置 实现屏幕滚动时 显示背景图不同区域
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8&quo ...
- css background 背景图设置
- css用背景图来替换文字来达到隐藏文字的目的
根据html代码的不同来分成两大类方法,如下 html代码: <h1 class="replace-indent">hello see</h1> 第一种方法 ...
- css 在背景图上加渐变
<html> <head> <title>我的第一个 HTML 页面</title> <style> .banner { width: %; ...
- 在css中设置图片的背景图,怎么设置图片纵向拉伸
css中设置背景图拉伸填充,在css2.1之前这个背景的长宽值是不能被修改的. 实际的结果是只能重复显示,可以使用repeat,repeat-x,repeat-y,no-repeat这些属性来控制背景 ...
随机推荐
- C语言-Hello, world
你好, 世界 --1-- 语言的编写准备 1.1 C语言源文件的编译执行过程 1.2 常见文件的拓展名 1.3 常用的命令行指令 1.4 环境及运行方法 --2--编写代码 2.1练习 --3-- ...
- windows平台下基于VisualStudio的Clang安装和配置
LLVM 是一个开源的编译器架构,它已经被成功应用到多个应用领域.Clang是 LLVM 的一个编译器前端,它目前支持 C, C++, Objective-C 以及 Objective-C++ 等编程 ...
- java中的泛型和sql中的索引
sql中的索引 索引:好处查询的速度快,被删除,修改,不会对表产生影响,作用是加速查询: 一种典型的数据库对象 作用:提交数据的查询效率,尤其对一些数据量很大的表 索引是用来为表服务的 索引是orac ...
- sql 语句纵表变横表
现把转换方法列举如下: 1.纵表转横表: 纵表结构 TableA Name Course Grade 张三 语文 75 张三 数学 80 张三 英语 90 李四 语文 95 李四 数学 55 横表结构 ...
- 据说年薪30万的Android程序员必须知道的帖子
Android中国开发精英 目前包括: Android开源项目第一篇--个性化控件(View)篇 包括ListView.ActionBar.Menu.ViewPager.Gallery.G ...
- jQuery事件总结
blur() 触发或绑定blur事件.$("input").blur(function(){ $("input").css("background-c ...
- hive的使用03
1.hive中的四种排序 1.1 order by :对全局进行排序,只能有一个reduce select * from hive.employee order by id;
- GOLANG 常用命令
golang常用命令: 命令 功能 build 编译包和依赖 run 编译并且直接运行 install 编译安装包和依赖 get 下载并安装包和依赖 fmt 调用gofmt格式化源码文件 d ...
- ImageList图标左边有黑色竖线
ImageList图标左边有黑色竖线, 原因 ImageList颜色深度太小引起的,解决方案,把颜色深度调成Depth32Bit 默认: 修改为: 结果: 备注:根据文件获得文件的系统图标: Icon ...
- webpack详细配置讲解
//常见的Webpack配置文件var webpack = require('webpack');var HtmlWebpackPlugin = require('html-webpack-plugi ...