关于背景图background-image

文章摘自:http://blog.csdn.net/cicada_slough/article/details/43305175

/*背景图边距问题-在CSS中,背景图片的定位方位有3种:*/
1)关键字:background-position: top right;
2)像素:background-position: 0px 0px;
3)百分比:background-position: 0% 0%;

/*背景图与元素大小设置-background-size:cover  (背景图无论多大显示在元素内)*/
我们解决这个问题的方法是用img;
监听window的resize事件。
resize的回调函数逻辑如下:
当window的宽高比大于图片的宽高比的时候, 图片的width设为100%,height设为auto
当window的宽高比小于图片的宽高比的时候, 图片的height设为100%,width设为auto
dom loaded的时候先调一下这个resize回调函数。

body{background-image:url(skin/p_103x196_1.jpg);background-repeat:no-repeat;background-position:50% 200px;background-attachment:fixed;} 
[ background-image ] 指定对象的背景图像可以是真实图片路径或使用渐变创建的“背景图像 [ background-repeat ]: 指定对象的背景图像如何铺排填充
 [ background-attachment ]: 指定对象的背景图像是随对象内容滚动还是固的
 [ background-position ]: 指定对象的背景图像位置。
 [ background-origin ]: 指定对象的背景图像显示的原点。 
[ background-clip ]: 指定对象的背景图像向外裁剪的区域。
 [ background-size ]: 指定对象的背景图像的尺寸大小。

时间: 2024-10-17 09:46:15

关于背景图background-image的相关文章

背景图background的例子分析及相关属性

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

background 设置文本框背景图

background 属性的作用是给元素设置背景,它是一个复合属性,常用的子属性如下: background-color 指定元素的背景颜色. background-image 指定元素的背景图像. background-position 指定背景图像的位置,在复合属性中与 size 二选一. background-size 指定背景图片的尺寸,在复合属性中与 position 二选一. background-repeat 指定如何重复背景图像. 多数时候,我们都是给 div 等区块元素设置背景

html始终让元素居中显示,背景图铺满随便拖动不出界

首先,写两个class属性 body { margin: 0; padding: 0; height: 100%; width: 100%; background-image: url(../Content/Images/background.jpg); background-repeat: no-repeat; background-size: cover; } .login { height: 300px; width: 400px; border: 1px solid #f00; posi

HTML中设置背景图的两种方式

HTML中设置背景图的两种方式 1.background    background:url(images/search.png) no-repeat top; 2.background-image    background-image:url(images/search.png):    background-repeat:no-repeat;

如何使用 css3 transform 属性来变换背景图?

本文和大家分享的主要是使用 css3 transform 属性来变换背景图相关内容,一起来看看吧,希望对大家学习css3有所帮助. 使用 css3 transform 属性可以轻易的旋转,倾斜,缩放任何元素.目前即使没有任何前缀也可以在绝大部分浏览器上很好的使用 . 如果你要在黑莓浏览器或者 UC 浏览器使用这个属性, 你需要加 -webkit- 前缀. #myelement { -webkit-transform: rotate(30deg); transform: rotate(30deg)

一个动态小导航栏(好看的,用C3)(不依赖js,点击小图切换大的背景图)

<!DOCTYPE HTML><htmllang="en-US">    <head>        <meta charset="UTF-8">     <title>CSS3 Full Background Slider </title>        <style type="text/css">            @importurl("ht

css3 -- 背景图处理

1.多背景图片: 1 p{ 2 background-image:url() , url(); 3 background-position:95% 90% , 50% 50%; 4 background-repect: no-repect; 5 } 6 background-repect只有唯一的一个值,如果一个属性的值数量比其背景数量少,这样这些值就会被重复 7 background-color是唯一一个不接受多个值得元素,颜色层会一直堆放在图片层下方 8 p{ 9 background: 1

CSS 背景-CSS background

这里有个很好的样式学习网站:http://www.divcss5.com/rumen/r125.shtml 一.Css background背景语法   -   TOP CSS背景基础知识 CSS 背景这里指通过CSS对对象设置背景属性,如通过CSS设置背景各种样式. 背景语法: background: background-color || background-image || background-repeat || background-attachment || background-

关于背景图相对父容器垂直居中问题

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

a标签的背景图在ie8下不显示的问题

突然发现临下班时候问题就多, 马上下班了被头头告知线上已经上线很久的活动现在有个兼容性问题, a标签的背景图在ie8下会有不显示的情况. 我自己找了台ie8的机器实验了一下, 发现一切正常, 但是在另外一个同事机器上就会有这个问题, 真心奇怪! 后来找到问题的原因, 是因为在ie8下要显示a标签的背景图有一个重要属性: display:block; 同时还要注意background属性中 no-repeat 前面的空格. 改正之后, 背景图正常显示了. 不过同是ie8, 一个可以, 一个却不行这