css 设置背景图片铺满固定不动

#page{ position: relative; width: 100%; height: 100%; background-image:url(../img/bg.JPG); background-attachment: fixed; background-repeat: no-repeat; background-size: cover; float: left; }…

img只显示图片一部分或 css设置背景图片只显示图片指定区域

17:14 2016/3/22img只显示图片一部分或 css设置背景图片只显示图片指定区域 background-position: 100% 56%; 设置背景图片显示图片的哪个坐标区域,图片左上角为0,0或0%,0%,右下角为高度和宽度,或100%,100%. clip:rect(300px 100px 300px 0px); 设置显示图片的某个区域,分别是上右下左的顺序设置部分代码:<style type="text/css">img {position:abs…

ExtJS-Viewport背景图片铺满浏览器视图并自动伸缩

var viewport = Ext.create('Ext.container.Viewport', { style : 'background-image:url(login_bj.jpg);background-repeat: no-repeat;filter:"progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=\'scale\')";-moz-background-size:100% 100%;bac…

css 设置背景图片模糊，内容不模糊

需求:一个div设置了background: url,现在需要使图片背景模糊,div内的文字清晰显示. 原始代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <style type="text/css"> .content { color: #ffffff; font-size: 40px; } .bg…

IE9以下通过css让html页面背景图片铺满整个屏幕

第一种方法不设为背景图片,通过css来控制样式,可兼容到IE6,代码如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="author" content="chaozhang5"> <meta name="mail" content=&qu…

css设置背景图片

background:pink;图片在背景图上面 background-image:url(food.jpg);一张图片铺满一行background-repeat:repeat-x;同一张图片多张铺满横向 background-repeat:repeat-y;同一张图片多张铺满纵向 background-repeat:no-repeat;只在左上角显示一张按图片原来的大小显示 background-attachment:fixed;把图片固定在某处,图片不随着滚动条的滚动上下移动 backgro…

css设置背景图片，ie显示不了

本来是想给导航栏<div class="nav"></div>添加背景图片的,设置css样式如下: .nav{background:url("http://img.pincai.com/article/repeatBg.gif") repeat-x scroll 0 -161px rgba(0,0,0,0); } 但不知道为什么在ie6.7.8下,背景都无法显示,在更高级的ie和Firefox.chrome下都是正常的. 排除图片链接的有效性…

（转）background-position—CSS设置背景图片的位置

background-position :在 CSS 中通过 background-position 属性可以调整背景图片的位置.因为在默认情况下背景图片都是从设置了 background-position 属性的标记(例如 body 标记)在左上角开始出现的,但实际制作时设计者往往希望背景图片出现在指定的位置 background-position:在CSS中通过background-position属性可以调整背景图片的位置.因为在默认情况下背景图片都是从设置了background-pos…

css设置背景图片自适应

CreateTime--2017年12月25日16:36:07 Author:Marydon 控制背景图片100%自适应填充布局 /* 控制背景图片100%自适应填充布局 */ body{ background-image: url(java八种基本数据类型介绍.png); background-size:100% 100%; /* firefox 浏览器 */ -moz-background-size:100% 100%; /* Safari 浏览器 */ -webkit-backgrou…

使用CSS设置背景图片，图片比较大，完全显示在一个DIV中

做的时候想要边框为比较好看的样式,需要UI切图并且放在div中,看起来会好看点像这样的,我随便挑选了一个,UI帮我切图出来需要把这个图片填到相应的div里面,但是很显然碰到一个问题,图片太大,而且放进去以后还不是响应式的那么解决问题的就来了: background:url(1.jpg);-webkit-background-size: 100px 60px; 这样还不是响应式应该怎么办呢 IMG加载的图片width设置为100%,高度会按照width的值自动等比率缩放背景图片用backg…

css 设置背景图片透明

最终效果: 背景图片css不变,再背景图片的里层元素设置css样式即可 opacity:0.4; filter:alpha(opacity=40); /* 针对 IE8 以及更早的版本 */…

css 设置body背景图片铺满

background-image: url(../../../assets/images/workflow/work.png); background-repeat: no-repeat; background-position: center; background-attachment: fixed; background-size: cover; -webkit-background-size: cover; -moz-background-size: cover; -o-backgrou…

css 背景图片铺满

body { width: 100%; height: 100%; background: url(img/loginbg.png); background-size: 100% 100%; background-repeat: no-repeat; background-position: center; background-attachment: fixed; background-size: cover; -webkit-background-size: cover; -moz-back…

background-size （设置背景图片的大小）

设置背景图片的大小,以长度值或百分比显示(数值包括长度length和百分比percentage),还可以通过cover和contain来对图片进行伸缩. 语法:background-size: auto | <长度值> | <百分比> | cover | contain bg-size = [ <length> | <percentage> | auto ]{1,2} | cover | contain 并且会根据背景原点位置 background-ori…

css网页中设置背景图片的方法详解

在css代码中设置背景图片的方法,包括背景图片.背景重复.背景固定.背景定位等用css设置网页中的背景图片,主要有如下几个属性: 1,背景颜色 {">说明:参数取值和颜色属性一样注意:在HTML当中,要为某个对象加上背景色只有一种办法,那就是先做一个表格,在表格中设置完背景色,再把对象放进单元格.这样做比较麻烦,不但代码较多,还要为表格的大小和定位伤些脑筋.现在用CSS就可以轻松地直接搞定了,而且对象的范围很广,可以是一段文字,也可以只是一个单词或一个字母.例子:给部分文字加背景颜色…

css background-size与背景图片填满div

background-size与背景图片填满div 在开发中,常有需要将一张图片作为一个div的背景图片充满div的需求 background-size的取值及解释 background-size共有三种属性,分别为 background-size: cover MDN文档解释说明:缩放背景图片以完全覆盖背景区,可能背景图片部分看不见.A keyword that is the inverse of contain. Scales the image as large as possible a…

background-size 设置背景图片的大小

background-size 设置背景图片的大小,以长度值或百分比显示,还可以通过cover和contain来对图片进行伸缩. 语法: background-size: auto | <长度值> | <百分比> | cover | contain 取值说明: 1.auto:默认值,不改变背景图片的原始高度和宽度: 2.<长度值>:成对出现如200px 50px,将背景图片宽高依次设置为前面两个值,当设置一个值时,将其作为图片宽度值来等比缩放: 3.<百分比>…

CSS background-image背景图片相关介绍

这里将会介绍如何通过background-image设置背景图片,以及背景图片的平铺.拉伸.偏移.设置大小等操作. 1. 背景图片样式分类 CSS中设置元素背景图片及其背景图片样式的属性主要以下几个: background-image :设置元素的背景图片. background-repeat :设置如何平铺背景图片. background-attachment :设置背景图片是否固定或随着滚动移动. background-position :设置背景图片的位置. background-size…

css设置背景固定不滚动效果的示例

css设置背景固定不滚动效果的示例背景固定不滚动各位看到最多的无非就是QQ空间了,我们在很多的空间都可以看到内容滚动而北京图片不滚动了,下文整理了几个关于背景固定不滚动css代码. 一.css设置背景不滚动的效果 <!doctype html public "-//w3c//dtd xhtml 1.0 transitional//en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd">…

CSS中背景图片定位方法

转自:http://www.ruanyifeng.com/blog/2008/05/css_background_image_positioning.html 作者: 阮一峰日期: 2008年5月 7日 CSS中背景图片的定位,困扰我很久了.今天总算搞懂了,一定要记下来. 在CSS中,背景图片的定位方法有3种: 1)关键字:background-position: top left; 2)像素:background-position: 0px 0px; 3)百分比:background-pos…

Win7无法设置背景图片的快速解决办法

不知道怎么回事,win7电脑突然连个性化设置背景图片的按钮都没了.真操蛋~~~满屏的黑色背景图案,看着实在是不爽. 为了解决这个问题,网上搜索了好长时间,都不尽然! 最后想到了一个超简单的方法就是: 找到这个路径:D:\Users\Terry\AppData\Roaming\Microsoft\Windows\Themes 就是用windows画图软件打开,然后设置为背景图片即可. 我勒个去,顿时发现自己是个天才!!!O(∩_∩)O哈哈~.......…

CSS3设置背景图片的大小

设置背景图片的大小,以长度值或百分比显示,还可以通过cover和contain来对图片进行伸缩. background-size 语法详解: 要在插入图片之后进行设置背景图片的大小 background-size:auto;/* 默认值,不改变背景图片的高度和宽度 */ background-size:100px 50px;/* 第一个值为宽,第二个值为高,当设置一个值时,将其作为图片宽度来等比缩放 */ background-size:10%;/* 0%~100%之间的任何值,将背景图片宽高按…

CSS中背景图片的background-position中的left top到底是相对于谁的？

在学习的时候遇到了如下问题: CSS中背景图片的background-position中的left top到底是相对于谁的,content-box?padding-box?border-box? background属性中的backgound-image和background-color相对的box是一致的吗? 如何做到背景图片位于容器的右边10px,底边10px? 首先我们来看一下盒模型:盒模型从外到内依次为:margin-box,border-box,padding-box,content-…

(转)HTML&CSS——background: url() no-repeat 0 -64px;CSS中背景图片定位方法

http://blog.csdn.net/oscar92420aaa/article/details/51304067 CSS中背景图片的定位,困扰我很久了.今天总算搞懂了,一定要记下来. 在CSS中,背景图片的定位方法有3种: 1)关键字:background-position: top left; 2)像素:background-position: 0px 0px; 3)百分比:background-position: 0% 0%; 上面这三句语句,都将图片定位在背景的左上角,表面上看效果是…

HTML&CSS——background: url() no-repeat 0 -64px;CSS中背景图片定位方法

CSS中背景图片的定位,困扰我很久了.今天总算搞懂了,一定要记下来. 在CSS中,背景图片的定位方法有3种: 1)关键字:background-position: top left; 2)像素:background-position: 0px 0px; 3)百分比:background-position: 0% 0%; 上面这三句语句,都将图片定位在背景的左上角,表面上看效果是一样的,实际上第三种定位机制与前两种完全不同. 前两种定位,都是将背景图片左上角的原点,放置在规定的位置.请看下面这张图…

【css 设置背景图片铺满固定不动】的更多相关文章