您现在的位置是：网站首页> 编程资料编程资料

CSS background全部汇总css background-attachment属性进阶css 背景固定样式background-attachment属性基础css background 背景图的设置方法CSS的background属性及CSS3的背景图片设置总结CSS制作边框效果的技巧总结详解使用CSS固定页面背景图片位置的方法使用CSS3来实现滚动视差效果的教程css 中background 设置文本框背景图 的方法

2021-09-04 966人已围观

简介 下面小编就为大家带来一篇CSS background全部汇总。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧

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

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.      background: url(img_flower.jpg) no-repeat center fixed;    
  3.      background-size: cover;   
  4.  }  

小tips：

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

（目前只有想法，还没找到符合需求的图像。）

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

上一篇：关于css旋转动画效果的简单实现CSS重要属性之 margin 属性知识大整合(必看篇)CSS background全部汇总利用CSS3实现自定义滚动条代码分享利用纯CSS实现动态的文字效果实例CSS重要属性之float学习心得(分享)常用的 css 命名规则(推荐)纯CSS3制作逼真的汽车运动动画特效源码浅谈css和@import区别及用法

下一篇：CSS重要属性之 margin 属性知识大整合(必看篇)CSS background全部汇总关于css旋转动画效果的简单实现利用CSS3实现自定义滚动条代码分享利用纯CSS实现动态的文字效果实例CSS重要属性之float学习心得(分享)常用的 css 命名规则(推荐)纯CSS3制作逼真的汽车运动动画特效源码浅谈css和@import区别及用法

相关内容

点击排行

本栏推荐

猜你喜欢

-六神源码网