【html-css控制背景图全屏拉伸不重复显示】的更多相关文章

html-css控制背景图全屏拉伸不重复显示

在HTML中,当我们设置背景图,只能采用是否重叠.居中.重叠方向这几个选项 CSS3中设置 body { background:#3d71b8 url(../back_main.png); background-size: 100%; background-position:center; } 但是background-siz是CSS 3的属性,并不是所有的浏览器都支持. CSS2中并没有图片全屏拉伸的属性,只能想其他办法. 利用一个DIV层,在里面装载一个IMG标签.然后设置DIV和IMG的大…

[转]完美的背景图全屏css代码 – background-size:cover?

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

css固定背景图位置 实现屏幕滚动时 显示背景图不同区域

<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <style> .container { width: 100%; padding: 50px 0; padding-bottom: 30px; height: auto; } .container.image-containe…

纯CSS控制背景图片100%自适应填充布局

https://blog.csdn.net/wd4java/article/details/50537562 解决:   html,body{height: 100%;width: 100%;margin:0;padding:0;}   body{   background:url(bg-login.png)no-repeat;   width:100%;   height:100%;   background-size:100% 100%;   position:absolute;   fil…

js控制页面的全屏展示和退出全屏显示

<!DOCTYPE html> <html> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <body > <button id="btn" >js控制页面的全屏展示和退出全屏显示</button> <div id="content" style="…

CSS实现背景图尺寸不随浏览器大小而变化的两种方法

一些网站的首页背景图尺寸不随浏览器缩放而变化,本例使用CSS 实现背景图尺寸不随浏览器缩放而变化,方法一. 把图片作为background,方法二使用img标签.喜欢的朋友可以看看   一些网站的首页背景图尺寸不随浏览器缩放而变化,例如百度个人版的首页,缩放后背景图的尺寸并不改变:  再比如花瓣网( huaban.com ): 现在用CSS来实现这一效果. 首 先需要一张足够大尺寸的图片,上图百度背景图的尺寸为1600*1000px( 图片地址:http://4.su.bdimg.com/ski…

基于animate.css动画库的全屏滚动小插件，适用于vue.js(移动端、pc)项目

功能简介 基于animate.css动画库的全屏滚动,适用于vue.js(移动端.pc)项目. 安装 npm install vue-animate-fullpage --save 使用 main.js 在main.js需要引入该插件的css和js文件 import 'vue-animate-fullpage/animate.css' import VueAnimateFullpage from 'vue-animate-fullpage' Vue.use(VueAnimateFullpage)…

CSS实现响应式全屏背景图

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

css实现响应式全屏背景

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

css控制背景图片在浏览器中居中，下拉浏览器的时候背景图一直不变

如 http://www.gm.com/ css样式如下 ;;} #con{ position:absolute; ; ; height:100%; width:100%; background-image:url("maskimg/star.jpg"); background-position: center 0; background-repeat: no-repeat; background-attachment:fixed; background-size: cover; -w…