CSS background全部汇总

所属分类: 网页制作 / CSS 阅读数: 550
收藏 0 赞 0 分享

所有背景属性都不能继承。

1. background-color

所有元素都能设置背景颜色。

background-color的默认值是transparent;也就是说,如果一个元素没有指定背景颜色,那么背景就是透明的,这样其祖先元素的背景才能可见。

2. background-image

所有元素都能设置背景图像;

背景图像可以设置多个,中间用逗号隔开;背景图像会层叠,写在前面的层次在上面。

3. background-repeat

repeat(默认)/no-repeat/repeat-x/ repeat-y

4. background-attachment

scroll(默认)/fixed
 
5. background-position

像素法:以图像左上角为起点,第一个值为水平移动的距离,第二个值为垂直移动的距离;若只规定一个值,第二个值默认为50%。

百分比法:百分比同时应用于图像和元素,相应的点重合进行定位。如果只指定一个百分数,意味着垂直方向为50%。

关键字法:top、right、bottom、left、center进行组合定位;若只规定一个值,第二个值默认为center。

注意:background-position可以为负值。

在默认情况下,背景颜色延伸到边框下面,背景图像在padding区域的左上角。

6. background-size

设置背景图像的尺寸;默认值为auto。

像素法:第一个值设置宽度,第二个值设置高度;若只有一个值,第二个值为auto。

百分比法:以父元素的宽度和高度以基准来计算。

关键字cover,不改变图像宽高比例,在水平和垂直方向都铺满整个元素,有可能导致一部分图像溢出。

关键字contain,不改变图像宽高比例,尽可能拉伸,直到某一方向铺满整个元素,有可能导致另一方向没有铺满。

7. background-origin

定义背景图像的初始位置

border-box,边框左上角。

padding-box,padding区域左上角;默认值。

content-box,内容区左上角。

8. background-clip

The CSS3 background-clip property specifies the painting area of the background.

The property takes three different values:

•border-box - (default) the background is painted to the outside edge of the border

•padding-box - the background is painted to the outside edge of the padding

•content-box - the background is painted within the content box

(英文的解释得比较清楚)

(英文都是从W3Schools Online搬运)

关于background-origin和background-clip,它们是相互独立的,互不干扰。

关于background的CSS写法,个人认为应该逻辑明确、层次分明;具体而言:

background定义背景图像,background-color定义背景颜色,background-clip定义背景显示区域。

(个人见解,仅供参考)

Full Size Background Image

If we want to have a background image on a website that covers the entire browser window at all times.

The requirements are as follows:

• Fill the entire page with the image (no white space)

• Scale image as needed

• Center image on page

• Do not cause scrollbars

The following example shows how to do it; Use the html element (the html element is always at least the height of the browser window). Then set a fixed and centered background on it. Then adjust its size with the background-size property:

CSS Code复制内容到剪贴板
  1. html {   
  2.      backgroundurl(img_flower.jpg) no-repeat center fixed;    
  3.      background-size: cover;   
  4.  }  

小tips:

利用背景图像的水平平铺,实现波浪式的边框效果。

(目前只有想法,还没找到符合需求的图像。)

以上这篇CSS background全部汇总就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持脚本之家。

更多精彩内容其他人还在看

CSS入门教程:计算CSS盒模型宽和高

 出处:当我们布局一个网页的时候,经常会遇到这样的一种情况,那就是最终网页成型的宽度或是高度会超出我们预先的计算,其实就就是所谓的CSS的盒模型造成的。 #test{margin:10px;padding:10px;width:100px;height:100px;}
收藏 0 赞 0 分享

在IE流览器中正确显示PNG透明图片

  png图片有很好的品质。阴影效果也不会有杂边,很流畅。如果插入网页的话可以给网站内容增色不少!更重要的是在不增加图片容量大小的情况下提高了页面的图片的质量。对于有复杂背景,如:在有颜色过度背景上插入不规则边框的图片带来极大很便利!   但目前IE中对于插入
收藏 0 赞 0 分享

CSS教程:DIV底部放置文字

  css对文字的布局上没有靠容器底部对齐的参数,目前使用的一个不错的方法也比较好.就是用position属性来解决,看下面的代码,用position的相对和绝对定位功能也轻松的实现了,文字靠近div低部对齐,并且靠近的距离还可以精确到像素,自己可以调节,是不是很不错呢?
收藏 0 赞 0 分享

如何用CSS让文字居于div的底部

  这个问题是别人提出的,因为css对文字的布局上没有靠容器底部对齐的参数,(或许有但是我没有发现)不过目前我使用的一个不错的方法也比较好.就是用position属性来解决,看下面的代码,我用position的相对和绝对定位功能也轻松的实现了,文字靠近div低部对齐,并且靠近
收藏 0 赞 0 分享

从A页面连接到B页面后并直接把B页面的隐藏层显示

  这个效果实现的是,在B页面里有两个层,一个显示层,我们暂定名c层,一个是隐藏层,我们暂定名d层,单独进B页面的时候,c层显示,d层隐藏,然而从A页面连接到B页面的时候,则是让d层显示,c层隐藏,我觉得这个效果对网页设计者以后会有很大帮助,现在把代码发出来,
收藏 0 赞 0 分享

CSS样式表定义标签li前面样式

定义LI前面的小点样式 view plaincopy to clipboardprint? 语法: list-style-type : disc | circle | square | decimal | lower-roman | upper-roman | lowe
收藏 0 赞 0 分享

符合标准的div css制作的弹出菜单

本文介绍了五款符合标准的div css制作的弹出菜单,而且不含有js的. NO.1最基本的:二级dropdown弹出菜单 <!DOCTYPE html PUB
收藏 0 赞 0 分享

CSS实现在文章每段后面加入带连接的隐藏文字

代码主要理解3个参数:createElement、createTextNode、appendChild。这3个js参数分别是创建元素、创建字符、追加节点。代码原理:循环页面段落标签<p>,创建连接元素<a>,创建要显示的连接字符,用SetAttribute
收藏 0 赞 0 分享

CSS:浏览器特定选择器介绍

当你想在一个浏览器里改变样式而不像在其他浏览器中改变时,这些选择器很有用。 IE6以下 *html{} IE 7 以下 *:first-child html {} * html {} 只对IE 7 *:first-child html {} 只对IE 7
收藏 0 赞 0 分享

WEB标准学习,认识两种网页声明的含义

即网页标准推出来以后,我们时常会看到两种不同的网页的声明,一个是Dhtml,一个是Xhtml。如下所示: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "ht
收藏 0 赞 0 分享
查看更多