div 背景图跟随滚动条

css 实现背景图片不跟着滚动条滚动而滚动

效果: 只需要在需要背景不跟着动的div里: div{ background:url(); background-attachment:fixed; } 加上background-attachment:fixed;就可以了,兼容IE6+ 如果不加这个属性: 网上兼容IE6的方法: <script type="text/javascript"> var scrollBackground = true; </script> 加一句js就行了

多个div背景图无缝拼接

公司在做环形进度条的时候遇到了这个问题,上网一搜,原来是因为两个div背景图拼接起来的,所以中间出现了必不可少的缝隙,最后把position改为relative,再加个margin:0,就解决好了,下图为前后的截图对比.

body和普通div背景图宽高百分比的区别

body和普通div背景图的区别 background: url(//m.360buyimg.com/mobilecms/s220x220_jfs/t2746/167/831241799/299152/1731092b/5728423cNa16c83cb.jpg!q70.jpg); background-size: 100% 100%; position: absolute; height: 100px; width: 100%; 你给body这个设置,和给

IE6下 input 背景图滚动问题及标签规范

ie6 背景图滚动问题: <title>ie6下input背景图滚动问题</title> <style> .box{ height:20px; width:300px; background:url(%E7%BB%83%E4%B9%A0%E8%A1%A8%E6%A0%BC/mon.jpg) no-repeat; background-color:#fcf; border:1px solid #069; } .box input{height:20px; width:30

CSS实现事件穿透与背景图不跟随滚动条

1. 事件穿透属性:pointer-events: none // auto默认值.none:不捕捉target事件(实现穿透) 用途:当需要使用透明遮罩并且允许点击遮罩下方元素时,或需要使用背景容器展示样式时 2. 背景图不跟随滚动条: background-image: url('xxx'); background-size: 100% 100%; background-attachment: fixed; // 不跟随滚动条属性设置用途:背景图

冒泡，setinterval，背景图的div绑定事件，匿名函数问题

1.会冒泡到兄弟元素么? $(function(){ $("#a").click(function(){alert("a")}) $("#b").click(function(){alert("b")}) $("#c1").click(function(){alert("c1")}) $("#c2").click(function(){alert("c2&q

HTML网页背景图很长要有滚动条滑动

1 前言由于网页背景图非常长,然后会出现只显示当前页面,后面部分看不到,也不能滑动,开始以为不能滑动应该是没有加overflow-y: auto(scroll),结果加上去也是无效的. 2 代码 <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <meta http-equiv="X-UA-Compa

DIV+CSS+PS实现背景图的三层嵌套以及背景图的合并

传说中的“三层嵌套技术”. 一.背景图合并: div+css+ps合图相结合的技术:通过精确到1px的css设置,使用ps合成背景图片,特别是小图片合并,来完成页面效果. 首先讲讲三层嵌套原理: ①要做成这个效果,用ps软件抠出这一栏目 ②继续抠图,截出三张这一的小图标,高度务必一样的大小,才能平铺的时候一样高度,中间的图片一个像素就够了.

冒泡，setinterval，背景图的div绑定事件，匿名函数问题探究

1.会冒泡到兄弟元素么? $(function(){ $("#a").click(function(){alert("a")}) $("#b").click(function(){alert("b")}) $("#c1").click(function(){alert("c1")}) $("#c2").click(function(){alert("c2&q

css常用属性之绝对定位、相对定位、滚动条属性、背景图属性、字体、鼠标、超链接跳转页面

1.绝对定位position: fixed(比如广告页面向下滑动的时候,页面最上方有个标题不能随之滑动,就需要用到position: fixed,同时还需要用到一个标签(标签高度很高才会出现滚动的情况)) 随着滚动,最上面的块级不动,下面的文字可以随着滚动条而滚动 2.相对定位position:relative和被定位position:absolute,这两句如果不加的话,下面的对48*48的小方块无法挪到对应的角落相对定位中z-index:n 属性(没有写z-index的就是z-index

【CSS】div的背景图完整图片覆盖

最初的代码: .container_first { width: 100%; height: 100%; background: url(10176581.jpg); background-size: cover; position: relative; } 因为UI交给我的图片是按照iPhone6的尺寸来的,在iPhone4上面用cover的话覆盖的背景图是不完整的下面缺失更改后的代码: .container_first { width: 100%; height: 100%; backgr

CSS 实现背景图尺寸不随浏览器缩放而变化

一些网站的首页背景图尺寸不随浏览器缩放而变化,例如百度个人版的首页,缩放后背景图的尺寸并不改变: 再比如花瓣网( http://www.huaban.com): 这样做的好处是,比如当你在1024*768px分辨率的屏幕上看到完整的背景,再换至1280*800px分辨率的显示器浏览,不会出现背景不能充满屏幕的情况.换句话说,就是在各个分辨率的显示器下都能看到充满屏幕的背景图. 现在用CSS来实现这一效果. 首先需要一张足够大尺寸的图片,上图百度背

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

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

css 背景(background)属性、背景图定位

background属性: Background属性是css中应用比较多,且比较重要的一个属性,它是负责给盒子设置背景图上和背景颜色的,background是一个复合属性,它可以分解成如下几个设置项: (1)background-color 设置背景颜色 (2)background-image 设置背景图片地址 (3)background-repeat 设置背景图片如何重复平铺 (4)background-position 设置背景图片的位置 (5)background-attachment 设

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

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

html+css-->background-img(背景图的设置）

背景图:(相关验证代码请查看代码,在验证时需将当前不需要验证的代码注释掉) 1.inherit:从父元素继承属性设置 2.background-repeat:平铺(在图片大小小于元素尺寸时背景图默认平铺): no-repeat:取消默认平铺 repeat-x:横向平铺 repeat-y:纵向平铺 3.background-size:尺寸 px.百分比:依旧默认平铺元素 cover:等比放大覆盖元素 conta

前端学习笔记系列一：15vscode汉化、快速复制行、网页背景图有效设置、 dl~dt~dd标签使用

ctrl+shift+p,调出configure display language,选择en或zh,若没有则选择安装使用其它语言,则直接呼出扩展程序搜索界面,选择,然后安装,重启即可. shift+alt+向下箭头,快速复制一行背景图设置: 一张清晰漂亮的背景图片能给网页加分不少,设计师也经常会给页面的背景使用大图,我们既不想图片因为不同分辨率图片变形,也不希望当在大屏的情况下,背景有一块露白,简而言之,就是实现能自适应屏幕大小又不会变形的背景大图,而且背景图片不会随着滚动条滚动而滚动. 用C

遭遇input与button按钮背景图失效不显示的解决办法

笔者从事网页前端代码页面工程师已有多年,作为一个网页重构人员常常会遇到一些莫名其妙的DIV+CSS(正确的说法是XHTML+CSS)在 IE.FireFox火狐. 谷歌浏览器CHROME.苹果浏览器Safari.Opera下不兼容的问题,其中IE6最为棘手,历来IE6就被诸位前端代码人员所诅咒,无奈其用户在中国大陆又非常多!可恶的微软啊,你当年造IE6的时候为何不严格遵守W3C标准呢? 今天做公司的交友网站前端网页页面的时候笔者又遇到了难解决的网页前端DIVCSS代码问题,一个平时不会发生的怪

关于背景图相对父容器垂直居中问题 —— vertical-align 和 line-height 之间的区别

html css <div class="register-wrapper"> <div class="register"> <h1><span class="icons icons-home"></span>XXX网站首页!</h1> <div class="register-links-wrapper"> <ul class=&

CSS高效开发实战:CSS 3、LESS、SASS、Bootstrap、Foundation --读书笔记（1）设定背景图

技术的新发展,除计算机可以接入互联网之外,平板电脑.智能手机.智能电视等其他设备均可访问互联网.在多设备时代,构建多屏体验也不是听说的那么难. 但是这也增加了学习CSS的难度?不知道如何上手,只懂一点基础的CSS语法,在移动互联时代,难道我们就这样落伍了??好好学习吧,看完<CSS高效开发实战:CSS 3.LESS.SASS.Bootstrap.Foundation>,给自己的未来打气! 5.1 设定背景图的大小在CSS 3出现之前,背景图片的尺寸是由图片的实际尺寸决定的.如果同样的图片要

使用Canvas绘制背景图

原文 http://www.imququ.com/post/use-canvas-as-background-image.html 最近iCloud Web的Beta版换了UI,整体风格变得和iOS7一致了.首页图标下方漂浮着若干大小不一的泡泡,十分梦幻.大家可以访问 beta.icloud.com 体验下,如果觉得泡泡不够多,还可以加上 crazyAwesome 参数让泡泡变得更加疯狂. 上面提到的泡泡效果,有许多种实现方案.本文要讨论的是iCloud使用的Canvas绘制背景图方案.这样做

div 背景图 跟随滚动条

热门专题

div 背景图跟随滚动条