CSS控制背景

------------------CSS2-------------------------------------------------------

1.background:

2.background-color:

3.background-image: url();默认背景图片在元素的左上角显示

4.background-repeat: repeat\no-repeat\repeat-x\repeat-y;

5.background-position:  横向 纵向;(数值[百分数/坐标]/left,center,right)

6.background-attachment:  scroll/fixed;   //背景图片的依附方式(背景图像是否随对

象内容滚动,scroll默认值--滚,fixed---固定在屏幕(可视区域))---存在兼容性问题

------------------CSS3-------------------------------------------------------

background-origin:border/padding/content(从哪个区域开始显示背景)

------------>用来决定background-position 计算的参考位置

background-clip:border-box /padding-box /content-box /no-clip=border-box;

(从哪个区域向外裁剪背景)

------------>用来确定背景的裁剪区域

background-size: length / precentage ;

multiple backgrounds:多重背景图像,可以吧不同背景图像只放到一个快元素里。对多个图片url之间用逗号合开。

示例:

background-image: url(img/multiple-backgrounds.png), url(img/multiple-backgrounds.png),                       url(img/multiple-backgrounds.png);

background-position: left top, -320px bottom, -640px top;

background-repeat: no-repeat, no-repeat, repeat-y;

时间: 2024-10-01 02:45:49

CSS控制背景的相关文章

转 Div+Css控制背景图片水平垂直居中显示 背景铺满全屏

在Web开发中我们经常要碰到这样的问题:在为一个页面设置背景图片之后往往希望图片能够在分辨率比较大的情况下水平垂直都居中显示.通常水平居中显示在Css中是很容易做到的,而垂直居中就需要使用一些Css的技巧: 1. 首先为了能使得网站能够根据浏览器大小自适应,我们需要将页面的body元素height值设为100%,而在这之前,我们需要将xhtml验证从网站头删除.<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN&quo

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

原文地址:http://blog.csdn.net/wd4java/article/details/50537562 .personal_head { width: 100%; height: 35%; background: url("../../../static/img/headbg.jpg") no-repeat; background-size: 100% 100%; position: absolute; filter: progid:DXImageTransform.Mi

css控制背景图像不随滚动条的滚动而滚动

这几天在写一个demo,设置背景图像, background: url("../images/bg.jpg") repeat ; 在使用 $(window).scroll(function() { ....}); 监听滚动条时,在google下正常运行,背景图像没有异常 在ie.360.火狐下滚动滚动条时,背景图像一闪一闪的,很难受. 百度:说需要调显示器的监视器的屏幕刷新频率 > 70 Hz . 可是我的电脑只有60Hz ,那么问题来了,很多小伙伴的电脑或许跟我的一样,那怎么办

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

如 http://www.gm.com/ css样式如下 1 body{ margin:0; padding:0;} 2 #con{ 3 position:absolute; 4 top:0; 5 left:0; 6 height:100%; 7 width:100%; 8 background-image:url("maskimg/star.jpg"); 9 background-position: center 0; 10 background-repeat: no-repeat;

网页设计入门--使用css控制背景图像

一.设置背景页面背景颜色 background-color:color; 二.设置背景颜色给页面分块 通过background-color属性,不仅可以设置整个网页页面背景颜色,也可以对页面进行分块,分别设计每个分块的背景颜色 上图对应的代码为: 1 <html> 2 <head> 3 <title>my first text html</title> 4 <style type="text/css"> 5 6 body{ 7

20-css控制背景与css精灵

CSS控制背景 背景 background:颜色 图片 平铺方式 固定方式 位置 背景颜色 background-color:red: 背景图像 background-image:url(背景图像的位置及全称) 背景图片的重复方式 background-repeat:[repeat.no-repeat.repeat-x.repeat-y] x坐标y坐标[第一个值是水平位置,第二个是垂直位置]左上角0 0.单位是像素(0px 0px) 背景图像的位置 background-position:top

CSS控制元素背景透明度总结

方法一:CSS3的background rgba filter:progid:DXImageTransform.Microsoft.gradient(enabled='true',startColorstr='#7F000000',endColorstr='#7F000000');background:rgba(0,0,0,0.5); 常用的方法是rgba来实现背景透明度 兼容ie6 ie7 ie8的做法是用ie的滤镜实现 有个小问题就是通过这种方法实现背景透明度的话在ie系列下如果元素需要绑定

html学习之CSS控制宽高背景

该笔记为自学html设计笔记,所有知识点为自己整理,如有疑问请浏览十八哥php教程,教程链接,点击这里. 知识梳理:1.html中的<head>和<body>分别为文本网页的头部和主体部分,其中head主要是定义html的类型和属性,比如title是标题部分,meta是机器搜索时的索引:body是html呈现的主体部分,是浏览网页可以看到得那一部分. 2.CSS 的引入方式 ①外部链接一个CSS文件,我们在HTML头部分标明:<link href="css/my.c

CSS控制,使用图片作为序列标记

今天看以前写的网页设计作业,看见要将图片作为项目标记显示,而我居然使用的是背景图片插入完成了这一效果,觉得我当时的脑回路也是蛮神奇的,现在总结实现的方法,也让自己加深印象吧! 实现效果: 方法一:自然是使用list-style-image属性 #mainContent>li{ list-style-image:url(bullet_blue.png); } 这个方法用css控制,也比较简单,可是我觉得要给每个标题都添加<li>标记,特别麻烦.后面的有序列表部分不用实现用图片作为标记,选择