全屏css,CSS之全屏背景图
吐槽啦:Yeah 明天就是国庆了o(* ̄▽ ̄*)o!哈哈,提前祝福各位园友国庆快乐、假期愉快、生活美满、天天开心!国庆我要回家一趟,把一些不用的东西带回家,走访一下亲朋好友,在家打几天酱油~~~
言归正传,我们回到我们的主题来看看CSS之全屏背景图。Nowdays,满屏大图的网页成为了一种fashion,网页的模板、布局是用CSS、HTML……来设计的,这里就以CSS来聊全屏背景图。
简单点,对于全屏背景图,我们只需用CSS的一个background-size属性就可以了。
当background-size的值为cover时,浏览器会自动按比例缩放背景图的宽和高,直到大于或等于viewport的宽和高。
Syntas语法:
body {
/* 加载背景图 */
background-image: url(http://images.cnblogs.com/cnblogs_com/caidupingblogs/828701/o_5_11911_8.jpg);
/* 背景图垂直、水平均居中 */
background-position: center center;
/* 背景图不平铺 */
background-repeat: no-repeat;
/* 当内容高度大于图片高度时,背景图像的位置相对于viewport固定 */
background-attachment: fixed;
/* 让背景图基于容器大小伸缩 */
background-size: cover;
/* 设置背景颜色,背景图加载过程中会显示背景色 */
background-color: #FF0000;
}
在这里需要注意的一点就是:如果背景图小于body标签的尺寸(例如在高分辨率显示器上,或页面内容特别多时),浏览器会拉伸图片。我们都知道,当把一个图片拉伸时,图片会变模糊。
因此,在选择背景图时,要特别注意尺寸。
还有一个问题就是在其他媒体设备上查看,在不同的屏幕上查看是不一样的,所以我们要将max-width: 600px设为断点,也就是说当浏览器viewport大于600px时,会使用大背景图,反之使用小背景图。下面是媒体查询方法:
@media only screen and (max-width: 600px) {
body {
background-image: url(http://images.cnblogs.com/cnblogs_com/caidupingblogs/828701/o_5_11911_8.jpg);
}
}
我们设置background为fixed和center,再使用background-size来适应大小:
html {
background: url(images/bg.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
css设置全屏背景图,background-size 属性
在写主题样式的时候经常会碰到用背景图铺满整个背景的需求,这里分享下使用方法 需要的效果 图片以背景的形式铺满整个屏幕,不留空白区域 保持图像的纵横比(图片不变形) 图片居中 不出现滚动条 多浏览器支持 ...
CSS实现响应式全屏背景图
body { /* 加载背景图 */ background-image: url(images/background-photo.jpg); /* 背景图垂直.水平均居中 */ background- ...
全屏背景图的实现及background的相关属性
今天需要做一个占满设备宽度的轮播图,这里作为demo仅展示一张图,下面分别是要操作的图片(这里做了缩放处理,实际的图比较大),以及要实现的效果图,很明显两者是不成比例的: (图一) ...
一个酷炫的,基于HTML5,Jquery和Css的全屏焦点图特效,兼容各种浏览器
基于HTML5和CSS的焦点图特效,梅花图案的背景很有中国特色,而且还会动哦,效果超炫,推荐下载! 演示图 html代码 /p>
unity中全屏背景图缩放
using UnityEngine; using System.Collections; public class BgPicScript : MonoBehaviour { // Use this ...
css 设置全屏背景图片
div#div1{ position: ...
CSS之生成全屏背景图片
在CSS中背景图片的填充方法: background-position:x,y(背景图片x,y轴的定位) background-repeat:no-repeat(不平铺) background-rep ...
HTML5全屏背景视频与 CSS 和 JS(插件或库)
译文原链接:http://codetheory.in/html5-fullscreen-background-video/ 前言: 当网页载入时,自动播放的全屏背景视频已经成为当前颇受欢迎的趋势. 就 ...
css3全屏背景图片切换特效
效果体验:http://hovertree.com/texiao/css3/10/ 一般做图片切换效果,都会使用JS或者jQuery脚本,今天发现,其实只用CSS也可以实现.试试效果吧. 效果图: 代 ...
随机推荐
python获取命令行输出结果
#coding=utf-8 import os command = 'ping www.baidu.com ' #可以直接在命令行中执行的命令 r = os.popen(command) #执行该 ...
jQuery对象与dom对象的转换
一直以来对于通过jQuery方式获取的对象使不能直接使用JavaScript的一些方法的,开始的时候不理解,现在此案知道,原来jQuery获得的对象并不和我们平时使用getElementById获得的 ...
media type和media query
media type media type是CSS2的重要属性,通过它,可以针对不同的设备指定不同的样式. media type种类: 用法:
ReactNative系列组件用法(一)
首先我们来认识view 改变一些特性,再来看看项目的变化 我们新增flex布局的一些属性,再来看看项目的变化 接下来我们来看看如果获取屏幕的分辨率 关于图片的用法,reactNative这里也是很神奇 ...
Python数据分析入门之pandas基础总结
Pandas--"大熊猫"基础 Series Series: pandas的长枪(数据表中的一列或一行,观测向量,一维数组...) Series1 = pd.Series(np.r ...
dashboard and reporting Interface analysis
dashboard and reporting Interface analysis > show system show system backup show system counters ...
全屏css,CSS之全屏背景图相关推荐
- html 图片右侧空白,CSS缩小窗口时,背景图出现右侧空白
CSS让背景平铺的代码 repeat-x ,也就是沿着X方向重复下去(横向平铺): repeat-y (纵向平铺){ background-p_w_picpath: url 关于宽度自适应,已经是前段 ...
- html设置%3cbody%3e背景颜色,使用css写带纹理渐变背景图的示例代码
项目中页面长度大概在2000px以上,再加上背景图是带纹理和渐变的,所以加载起来会很大很耗费时间,所以就改用css实现了. 这个网站中有很多现成的背景,也可以自定义背景色,纹样的颜色和透明度. 网站中 ...
- Css 如何使纯颜色/背景图自适应的铺满全屏
摘要 他喵的我觉得一般就是三种需求: 1.纯颜色 解释:即只有background-color,没有图 需求:应至少充满一个视窗,如果内容超出一个视窗,自适应填充.比如知乎首页. 2.背景图 需求很动 ...
- img撑满全屏的方法(img非背景图)
我有一个模板,想按常规做一个div里面放置一个img图片,并且让图片铺满容器,自适应容器大小.HTML结构代码如下(在这个盒模型上,我已经放置了一些不重要的样式). <div style=&qu ...
- CSS缩小窗口时,背景图出现右侧空白
缩小窗口时CSS背景图出现右侧空白BUG的解决方法(兼容各浏览器) 解决办法: 在css内加入如下两行代码,让它自己判断: width:expression(document.body.clientW ...
- 使用css写带纹理渐变背景图
项目中页面长度大概在2000px以上,再加上背景图是带纹理和渐变的,所以加载起来会很大很耗费时间,所以就改用css实现了. 这次我们主要用到的网站是Hero Patterns--免费在线纹理素材库 这 ...
- 1、2(HTML与CSS).2.1 网站背景图
想要写的网站背景是这样的: https://www.quotery.com/ 它有几个特点: 1. 铺满整个屏幕 2. 当屏幕缩放时,图片会长宽一起缩放,而不是只随着屏幕缩放一条边,这样图片就不会变形 ...
- div+css如何用一张背景图实现全站背景图片调用
使用 background-image:url(bg.gif); background-repeat:repeat-x; background-position:0 -530px; 注意最后一个定 ...
- android 背景图遮罩,通过css使用background-color为背景图添加遮罩效果
一个div同时设置background-color和background-image的话,color是处于img层下方的,无法实现遮罩效果,所以需要再创建一个div作为其子div,然后设置子div的背 ...
- 背景图宽度自适应及背景图合并的CSS思想
关于宽度自适应,已经是前段开发人员必备的css技能之一,而背景图的合并则属于更高级别的要求. 我们为什么要宽度自适应,原因大体有以下几点: 第一:很多情况下有这样的需求,比如做B/S前端,90%以上要 ...
最新文章
- SQL中的多表查询,以及JOIN的顺序重要么?
- Spring Boot 项目打包 + Shell 脚本部署实践,太有用了!
- PowerShell学习笔记(1)-基础
- Maven内置常量/环境变量的获取
- 关于COUNT STOPKEY的工作机制
- Strut学习-web.xml
- eclipse不能调试运行Android程序问题的解决办法
- 【LeetCode】【HOT】215. 数组中的第K个最大元素(优先队列)
- seo日常工作表_5 個日常要做的 SEO 維護工作
- 微信小程序 java后勤服务管理系统app
- 国产三维CAD/CAM软件SINOVATION10.2版本发布,亮点功能抢先看!
- 仿迅雷播放器教程 -- 媒体播放器对比 (2)
- android oppo 模拟器,小姚Android构建VIVO华为魅族OPPO小米联想手游Android模拟器
- Windows环境下的视图之间切换快捷键及几个常用快捷键
- 高校最低分数录取线c语言,全国: 2018年普通高等学校招生录取最低控制分数线...
- telnet与ssh远程登陆配置方法
- tikz包 安装_TikZ: LaTeX绘图包
- Python基本语法小结(一)
- 使用计算机帮助各类设计人员,关于应用计算机辅助艺术设计的探讨
- Android 控件之Gallery图片集
热门文章
- PDF如何裁剪页面,PDF裁剪页面的方法
- 漂亮的带搜索框蓝黄拼色网站404页面源码
- fMRI Tutorial:FSL处理功能核磁共振数据
- 苹果手机屏幕上有白点怎么办
- fx3u4ad一adp说明书_三菱FX3U-4AD-ADP用户手册FX3U-4AD-ADP模拟控制版本手册 - 广州凌控...
- 德鲁克日志读后感之五十三
- 有哪些国外便宜虚拟主机适合个人建站呢
- 一些名片上最常用的中英文称呼:
- 解决vuepress-theme-reco中文标签跳转返回404问题
- 软件 耗电 android OS 系统,六款安卓平台浏览器耗电量实测