body { /* 加载背景图 */ background-image: url(images/background-photo.jpg); /* 背景图垂直.水平均居中 */ background-position: center center; /* 背景图不平铺 */ background-repeat: no-repeat; /* 当内容高度大于图片高度时,背景图像的位置相对于viewport固定 */ background-attachment: fixed; /* 让背景图基于容器大…

利用css中 background-size:cover  填充整个viewport 注意: 一张背景图像素5000px*5000px在pc端 缩放都基本满足要求 不会出现模糊失真: 但是在移动端使用如此大的图片完全是浪费资源,大图会导致加载变慢,尤其是在移动网络下. 在移动端可以另设一张相对小一点的图片使用媒体查询 body{ /* 加载背景图 */ background-image: url(images/background-photo.jpg); /* 背景图垂直.水平均居中 */ ba…

吐槽啦:Yeah  明天就是国庆了o(*￣▽￣*)o!哈哈,提前祝福各位园友国庆快乐.假期愉快.生活美满.天天开心!国庆我要回家一趟,把一些不用的东西带回家,走访一下亲朋好友,在家打几天酱油~~~ 言归正传,我们回到我们的主题来看看CSS之全屏背景图.Nowdays,满屏大图的网页成为了一种fashion,网页的模板.布局是用CSS.HTML……来设计的,这里就以CSS来聊全屏背景图. 简单点,对于全屏背景图,我们只需用CSS的一个background-size属性就可以了. 当backgrou…

遮罩层有很多今天介绍这个jQuery10种不同动画效果的响应式全屏遮罩层 效果预览 下载地址 实例代码 <div class="container"> <header class="sucaihuo-header"> <h1>全屏遮罩效果</h1> <nav class="sucaihuo-demos"> <a class="current-demo" href…

在写主题样式的时候经常会碰到用背景图铺满整个背景的需求,这里分享下使用方法 需要的效果 图片以背景的形式铺满整个屏幕,不留空白区域 保持图像的纵横比(图片不变形) 图片居中 不出现滚动条 多浏览器支持 以图片bg.jpg为例 最简单,最高效的方法 CSS3.0 归功于css3.0新增的一个属性background-size,可以简单的实现这个效果,这里用fixed和center定位背景图,然后用background-size来使图片铺满,具体css如下 -webkit-background-si…

分享一款全屏响应式的HTML5和CSS3页面切换效果.这个页面布局效果对于那些页面要求固定100%高度和宽度的网站和APP来说是十分有用的.效果图如下: 在线预览   源码下载 HTML wrapper div的class为st-container,里面包含作为导航按钮的radio和用于页面切换的面板st-scroll. <div class="st-container"> <input type="radio" name="radio-…

今天需要做一个占满设备宽度的轮播图,这里作为demo仅展示一张图,下面分别是要操作的图片(这里做了缩放处理,实际的图比较大),以及要实现的效果图,很明显两者是不成比例的:      (图一)                             (图二) 这里给定了宽,也就是设备宽度的100%,同时给定了高,比如这里设置为8.5rem (html的字体设为20px); 1. 首先我们考虑用img标签来放图片路径,可是这种方法是很难控制图片高度的,如果我们设置宽度100%,让高度自适应,那么实际…

html: <!--轮播 --> <div class="Excellent_swi"> <div class="swiper-container"> <div class="swiper-wrapper"> <div class="swiper-slide"> <img class="banner" src="https://du…

using UnityEngine; using System.Collections; public class BgPicScript : MonoBehaviour { // Use this for initialization public UITexture bg; void Start () { Debug.Log("device宽高: " + Screen.width + "_" + Screen.height); UIRoot root = Gam…

在CSS中背景图片的填充方法: background-position:x,y(背景图片x,y轴的定位) background-repeat:no-repeat(不平铺) background-repeat:repeat-x(水平方向平铺) background-repeat:repeat-y(垂直方向平铺) 主要是css样式: *{ margin:; padding:; } html{ /* This image will be displayed fullscreen */ backgrou…